/* LuckyCasino Maintenance v2
 * Firefly 背景請放：
 * ./assets/maintenance-bg.jpg
 * 建議：640x1386 或同比例高解析圖
 */

:root {
  color-scheme: dark;
  --gold-1: #fff2ad;
  --gold-2: #ffc63b;
  --gold-3: #d88a12;
  --text-main: #fff8df;
  --text-soft: rgba(255, 247, 224, .72);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  background: #080705;
  color: var(--text-main);
  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    system-ui,
    -apple-system,
    sans-serif;
}

button { font: inherit; }

.page-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(22px, env(safe-area-inset-top))
    20px
    max(26px, env(safe-area-inset-bottom));

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.38) 37%,
      rgba(0,0,0,.68) 100%
    ),
    url("./assets/maintenance-bg.jpg") center center / cover no-repeat,
    #080705;
}

.maintenance-card {
  width: min(100%, 430px);
  padding: 26px 22px 22px;
  text-align: center;
  border: 1px solid rgba(255, 201, 53, .42);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(38, 25, 9, .84), rgba(8, 7, 5, .91));
  box-shadow:
    0 22px 65px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255, 239, 172, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand {
  display: inline-block;
  margin-bottom: 10px;
  font-family: "DFKai-SB", "BiauKai", "Microsoft JhengHei", serif;
  font-size: clamp(28px, 9vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  color: #ffe17b;
  text-shadow:
    0 2px 0 #713809,
    0 5px 18px rgba(255, 170, 23, .42);
}

.status-icon {
  position: relative;
  width: 62px;
  height: 47px;
  margin: 2px auto 4px;
  color: var(--gold-2);
  filter: drop-shadow(0 4px 9px rgba(255,180,29,.25));
}

.gear {
  position: absolute;
  display: inline-block;
  line-height: 1;
}

.gear-a {
  left: 2px;
  top: 2px;
  font-size: 35px;
  animation: spin 5s linear infinite;
}

.gear-b {
  right: 1px;
  bottom: 0;
  font-size: 26px;
  animation: spin-reverse 4s linear infinite;
}

.eyebrow {
  margin: 1px 0 5px;
  color: rgba(255, 204, 82, .68);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(29px, 8vw, 39px);
  line-height: 1.2;
  letter-spacing: .05em;
}

.schedule-panel {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 208, 92, .27);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 186, 40, .075), rgba(0,0,0,.20));
}

.schedule-label,
.countdown-label {
  color: rgba(255, 237, 190, .60);
  font-size: 12px;
  font-weight: 700;
}

#scheduleText {
  color: #fff1be;
  font-size: 16px;
  line-height: 1.45;
}

.countdown-panel {
  margin-top: 9px;
  padding: 10px 14px 11px;
  border: 1px solid rgba(255, 208, 92, .18);
  border-radius: 15px;
  background: rgba(0,0,0,.26);
}

.countdown-panel[hidden] { display: none; }

.countdown-value {
  display: block;
  margin-top: 3px;
  color: var(--gold-1);
  font-size: clamp(25px, 8vw, 34px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
  text-shadow: 0 2px 14px rgba(255, 190, 50, .24);
}

.description {
  margin: 16px auto 17px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.return-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 227, 138, .77);
  border-radius: 14px;
  color: #392000;
  font-weight: 900;
  letter-spacing: .05em;
  cursor: pointer;
  background:
    linear-gradient(180deg, #fff0a6 0%, #ffc83d 48%, #df8e12 100%);
  box-shadow:
    0 8px 20px rgba(255, 166, 17, .20),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.return-button:active {
  transform: translateY(1px);
  filter: brightness(.95);
}

.footnote {
  margin: 14px 0 0;
  color: rgba(255, 244, 214, .48);
  font-size: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }

@media (max-height: 680px) {
  .maintenance-card { padding: 19px 20px 17px; }
  .brand { margin-bottom: 6px; }
  h1 { margin-bottom: 11px; }
  .description { margin: 11px auto 12px; line-height: 1.55; }
  .status-icon { height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .gear { animation: none; }
}