* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #140808; color: #f6e6c6; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
input { outline: none; }
.page { min-height: 100vh; padding: 20px 16px 40px; }
.hero { text-align: center; padding: 56px 0 28px; }
.hero h1 { margin: 0; color: #e8c36a; font-size: 32px; }
.hero p { margin: 8px 0 0; color: #c9b48a; font-size: 13px; }
.card { background: #2a1212; border: 1px solid #7a3a2a; border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.h { color: #e8c36a; margin: 0 0 12px; font-size: 16px; }
.input { width: 100%; height: 44px; border: 1px solid #7a3a2a; border-radius: 8px; background: #1a0a0a; color: #fff; padding: 0 12px; margin-bottom: 10px; }
.btn { height: 44px; line-height: 44px; text-align: center; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn.gold { background: linear-gradient(180deg, #e8c36a, #c9a227); color: #3a1a00; }
.btn.red { background: #8B1E1E; color: #e8c36a; }
.btn.ghost { border: 1px solid #7a3a2a; color: #c9b48a; }
.tabs { display: flex; margin-bottom: 12px; }
.tab { flex: 1; text-align: center; line-height: 40px; color: #8a7460; }
.tab.on { color: #e8c36a; border-bottom: 2px solid #e8c36a; }
.assets { display: flex; gap: 8px; margin-bottom: 14px; }
.asset { flex: 1; background: #2a1212; border: 1px solid #7a3a2a; border-radius: 10px; padding: 10px 6px; text-align: center; }
.lab { display: block; color: #8a7460; font-size: 12px; }
.num { display: block; margin-top: 4px; font-size: 18px; }
.gold { color: #e8c36a; }
.userbar { display: flex; align-items: center; margin-bottom: 14px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: #8B1E1E; color: #e8c36a; text-align: center; line-height: 46px; font-size: 20px; }
.meta { flex: 1; margin-left: 10px; }
.meta b { display: block; }
.meta span { color: #8a7460; font-size: 12px; }
.link { color: #e8c36a; font-size: 13px; }
.hint, .notice { color: #8a7460; font-size: 12px; line-height: 1.5; }
.nav { display: flex; align-items: center; padding: 8px 0 12px; }
.nav .side { width: 80px; color: #e8c36a; font-size: 13px; }
.nav .side.right { text-align: right; }
.nav .mid { flex: 1; text-align: center; }
.status { display: flex; justify-content: space-between; background: #2a1212; border: 1px solid #7a3a2a; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.status .time { color: #e8c36a; font-size: 22px; font-weight: 700; }
.odds { text-align: center; color: #8a7460; font-size: 12px; margin: 0 0 8px; }
.cup { margin: 2px 0 12px; }
.cup-bowl {
  position: relative; width: 100%; max-width: 340px; height: 250px; margin: 0 auto;
  background: radial-gradient(ellipse at 50% 42%, #7a3a22 0%, #3d1810 58%, #160806 100%);
  border: 8px solid #c9a227; border-radius: 50%;
  box-shadow: inset 0 24px 36px rgba(0,0,0,.45), 0 10px 18px rgba(0,0,0,.35);
  overflow: hidden;
}
.cup-rim {
  position: absolute; left: 8%; right: 8%; top: 6%; height: 18px;
  border: 2px solid rgba(232,195,106,.55); border-radius: 50%; pointer-events: none;
}
.cup-dice {
  position: absolute; left: 12%; right: 12%; top: 8%; bottom: 22%;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
}
.cup.shaking .cup-bowl { animation: cupshake .1s linear infinite; }
.die { width: 100px; height: 100px; perspective: 520px; }
.cube {
  position: relative; width: 54px; height: 54px; margin: 6px auto 0;
  transform-style: preserve-3d;
  transform: rotateX(-72deg) rotateY(-8deg);
}
.cup.shaking .cube { animation: diceroll .14s linear infinite; }
.cube::before {
  content: "";
  position: absolute;
  left: -4px; top: -4px;
  width: 62px; height: 62px;
  background: #f6e6c4;
  border-radius: 8px;
  transform: translateZ(8px);
}
.face {
  position: absolute; left: -3px; top: -3px; width: 60px; height: 60px;
  border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; background: #f6e6c4;
}
.face img { width: 92%; height: 92%; object-fit: contain; }
.face.top { transform: rotateX(90deg) translateZ(27px); }
.face.left { transform: translateZ(27px); }
.face.right { transform: rotateY(90deg) translateZ(27px); }
@keyframes diceroll {
  0% { transform: rotateX(-26deg) rotateY(-50deg); }
  50% { transform: rotateX(-10deg) rotateY(-18deg); }
  100% { transform: rotateX(-26deg) rotateY(-50deg); }
}
@keyframes cupshake {
  0% { transform: rotate(-5deg) translateX(-4px); }
  50% { transform: rotate(5deg) translateX(4px); }
  100% { transform: rotate(-5deg) translateX(-4px); }
}
.zodiac-board { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 10px; }
.zodiac-board img { display: block; width: 100%; height: auto; vertical-align: top; }
.zodiac-hits {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
}
.cell {
  position: relative; border: 2px solid transparent; background: transparent;
}
.cell.on { border-color: #c9a227; box-shadow: inset 0 0 0 2px rgba(201,162,39,.55); background: rgba(232,195,106,.18); }
.cell .chip { position: absolute; top: 4px; right: 4px; background: #c9a227; color: #3a1a00; font-size: 11px; border-radius: 10px; padding: 0 6px; line-height: 18px; font-weight: 700; }
.owner-bar { display: flex; gap: 6px; margin: 10px 0; }
.owner-bar .btn { flex: 1; font-size: 13px; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #3a1c1c; font-size: 13px; }
.ops span { margin-left: 10px; color: #e8c36a; }
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.panel { width: 100%; background: #2a1212; border-radius: 16px 16px 0 0; padding: 18px 16px 28px; }
.chips { display: flex; gap: 6px; }
.chipbtn { flex: 1; text-align: center; line-height: 34px; border: 1px solid #7a3a2a; border-radius: 8px; font-size: 13px; }
.chipbtn.on { background: #c9a227; color: #3a1a00; }
.toast { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); background: rgba(0,0,0,.78); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 99; font-size: 14px; }