/* ============================================================
   Đổ Xăm Hường — phần bổ sung giao diện
   ============================================================ */

/* sân khấu giữa chiếu */
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
}

.stage__hint {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 246, 230, .42);
  text-align: center;
}

/* đĩa đựng xúc xắc */
.tray {
  width: 100%;
  max-width: 320px;
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(255, 220, 150, .10), rgba(0, 0, 0, .34));
  border-radius: var(--r-lg);
  padding: 14px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, .22),
    inset 0 8px 22px rgba(0, 0, 0, .35);
}

/* hàng lịch sử mảnh hơn */
.history { min-height: 22px; }

/* kết quả nằm giữa sân khấu chứ không phủ lên cửa */
.table .result { top: 58%; }

/* nút quay lại xem bảng tin khi đã đóng */
.notice-mini {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 10px);
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 6, 11, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .3);
  color: var(--gold-200);
  font-size: 12.5px;
  font-weight: 700;
}

/* banner kết quả khi ăn */
.win-banner {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) scale(.9);
  z-index: 46;
  padding: 14px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(46, 17, 27, .97), rgba(20, 8, 14, .97));
  box-shadow: inset 0 0 0 1.5px rgba(86, 214, 138, .6), 0 18px 40px rgba(0, 0, 0, .55);
  text-align: center;
  opacity: 0;
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
}
.win-banner.is-show { opacity: 1; transform: translateX(-50%) scale(1); }
.win-banner__sum {
  font-size: 26px;
  font-weight: 900;
  color: #CFF7DD;
  font-variant-numeric: tabular-nums;
}
.win-banner__sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* bảng tin nằm ngay trên chiếu, không phủ lên nút */
.notice-slot { width: 100%; max-width: 340px; }
.notice-slot:empty { display: none; }

.stage .notice {
  position: static;
  transform: none;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  bottom: auto;
  left: auto;
}
.stage .notice__body { max-height: 22vh; }
.notice--instant { animation: none !important; }


/* hoa văn giữa chiếu */
.stage { position: relative; }
.stage__mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  color: rgba(242, 201, 106, .5);
  opacity: .17;
  pointer-events: none;
  z-index: 0;
}
.stage__mark svg { width: 100%; height: 100%; display: block; }
.stage > .tray, .stage > .stage__hint, .stage > .notice-slot { position: relative; z-index: 1; }


/* dồn máng xúc xắc xuống sát khu điều khiển, để khoảng trống thành một khối liền */
.stage {
  justify-content: flex-end;
  padding-bottom: 6px;
  gap: 8px;
}
.stage__mark {
  top: 38%;
  width: 240px;
  height: 240px;
  opacity: .13;
}
@media (min-height: 900px) {
  .stage__mark { width: 300px; height: 300px; }
}