@charset "utf-8";
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
button{font:inherit}

:root{
  --bg: #000334;
  --stage-w: min(820px, 92vw);
  --stage-r: 18px;
  --balls-bottom: 6%;
  --cd-top: 56%;
}

body{
  background: var(--bg);
  color:#fff;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Microsoft JhengHei",sans-serif;
}

.nav{
  position: sticky;
  top: 0;
  z-index: 999;
  height: 46px;
  background: #083383;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.nav-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
}

.nav-logo img{
  height: 25px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-logo span{
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}

.wrap{
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 18px 12px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.stage{
  position:relative;
  width: var(--stage-w);
  aspect-ratio: 3 / 5;
  border-radius: var(--stage-r);
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.layer{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}

.bg1{
  inset:0;
  left:0;
  transform:none;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.bg2{
  bottom:0;
  width:100%;
  z-index:2;
}

.fx-video{
  top: 0;
  width: 100%;
  height: 55%;
  object-fit: cover;
  z-index: 3;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: saturate(1.2) contrast(1.05);
}

.subject{
  top:-3%;
  width:95%;
  z-index:5;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.35));
}

.subtitle{
  top:40%;
  width:70%;
  z-index:6;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
}

@keyframes wbcFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-8px); }
}
.subject{
  animation: wbcFloat 3.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.countdown{
  position: absolute;
  left: 50%;
  top: var(--cd-top);
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 8px 18px rgba(0,0,0,.18);
}

.cd-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: .95;
  white-space: nowrap;
}

.cd-time{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.cd-time span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
}

.cd-time i{
  font-style: normal;
  font-size: 11px;
  opacity: .85;
  margin: 0 2px 0 1px;
}

.cd-sub{ display:none; }

.balls{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: var(--balls-bottom);
  width:65%;
  z-index:10;

  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.ball{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}

.ball img{
  width:100%;
  height:auto;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.42));
  transition: transform .16s ease, filter .16s ease;
}

.ball:hover img{
  transform: translateY(-3px) scale(1.02);
}

.ball.is-selected img{
  transform: translateY(-6px) scale(1.10);
  filter: drop-shadow(0 0 16px rgba(255, 118, 39, 0.95)) drop-shadow(0 16px 22px rgba(0,0,0,.55));
}

.ball.is-disabled img{
  opacity:.35;
  filter: grayscale(1) brightness(.9);
  transform: scale(.92);
}

.hint{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:1.5%;
  z-index:11;
  font-size:13px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  opacity:.95;
}

.info{
  width: var(--stage-w);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 14px 12px;
}

.info-title{
  font-size:18px;
  font-weight:1000;
  letter-spacing:.04em;
  margin-bottom:10px;
}

.info-list{
  list-style: disc;
  padding-left: 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color: rgba(255,255,255,.92);
  line-height:1.55;
  font-size:14px;
}

.info-list a{ color:#f3e525;font-weight:800;text-decoration:underline}

.info-note{
  margin-top:10px;
  font-size:12px;
  opacity:.85;
  line-height:1.5;
}

.popup-mask{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-mask.active{ display:flex; }

.popup-title,
.popup-text{
  display:none !important;
}

.popup-btn{
  margin-top: 16px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 0;
  cursor: pointer;
}

.popup-btn:hover{
  background:#d32f2f;
}

.popup-btn:active{
  background:#b71c1c;
  transform: scale(.98);
}

.popup-btn{
  transition: background-color .15s ease, transform .06s ease;
}

@media (max-width: 480px){

  :root{
    --stage-w: min(900px, 94vw);
    --balls-bottom: 5.5%;
    --cd-top: 56%;
  }

  .nav{ padding: 0 12px; }
  .nav-logo img{ height: 22px; }
  .nav-logo span{ font-size: 13px; }

  .wrap{
    padding: 14px 10px 28px;
    gap: 18px;
  }

  .stage{
    border-radius: 16px;
  }

  .subject{ width: 100%; top: -7%; }
  .subtitle{ width: 85%; top: 38%; }

  .countdown{
    padding: 7px 14px;
    gap: 10px;
  }
  .cd-title{
    font-size: 11px;
    letter-spacing: .10em;
  }
  .cd-time{
    font-size: 13px;
    gap: 5px;
  }
  .cd-time span{
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border-radius: 7px;
  }
  .cd-time i{
    font-size: 10px;
  }

  .balls{
    width: 63%;
    gap: 12px;
  }

  .hint{
    font-size: 12px;
  }

  .info{ padding: 12px 12px 10px; }
  .info-title{ font-size: 16px; }
  .info-list{ font-size: 13px; gap: 7px; }
  .info-note{ font-size: 11px; }
}

@media (min-width: 480px) and (max-width: 768px){

  :root{
    --stage-w: min(860px, 92vw);
    --balls-bottom: 5.8%;
    --cd-top: 56.5%;
  }

  .subject{ width: 96%; top: -2.5%; }
  .subtitle{ width: 76%; top: 40%; }

  .balls{ width: 70%; }
}

@keyframes ballShake{
  0%   { transform: translateY(-6px) scale(1.10) translateX(0) rotate(0); }
  10%  { transform: translateY(-6px) scale(1.10) translateX(-6px) rotate(-2deg); }
  20%  { transform: translateY(-6px) scale(1.10) translateX(6px)  rotate(2deg); }
  30%  { transform: translateY(-6px) scale(1.10) translateX(-5px) rotate(-2deg); }
  40%  { transform: translateY(-6px) scale(1.10) translateX(5px)  rotate(2deg); }
  50%  { transform: translateY(-6px) scale(1.10) translateX(-3px) rotate(-1deg); }
  60%  { transform: translateY(-6px) scale(1.10) translateX(3px)  rotate(1deg); }
  70%  { transform: translateY(-6px) scale(1.10) translateX(-2px) rotate(-1deg); }
  80%  { transform: translateY(-6px) scale(1.10) translateX(2px)  rotate(1deg); }
  90%  { transform: translateY(-6px) scale(1.10) translateX(-1px) rotate(0); }
  100% { transform: translateY(-6px) scale(1.10) translateX(0) rotate(0); }
}

.ball.is-selected.is-shake img{
  animation: ballShake .42s ease-in-out 1;
}

@keyframes ballShakeBtn{
  0%   { transform: translateX(0) rotate(0); }
  15%  { transform: translateX(-5px) rotate(-1.5deg); }
  30%  { transform: translateX(5px)  rotate(1.5deg); }
  45%  { transform: translateX(-4px) rotate(-1.2deg); }
  60%  { transform: translateX(4px)  rotate(1.2deg); }
  75%  { transform: translateX(-2px) rotate(-0.6deg); }
  90%  { transform: translateX(2px)  rotate(0.6deg); }
  100% { transform: translateX(0) rotate(0); }
}

.ball.is-shake{
  animation: ballShakeBtn .36s ease-in-out 1;
}

.popup-card{
  width: min(420px, 92vw);
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  color: #333;
  box-shadow: none;
}
.popup-art{
  width: 100%;
  height: auto;
  display: block;
}
.popup-card .popup-btn{
  width: min(320px, 86vw);
  margin: 10px auto 0;
}

.bgm-btn{
  margin-left:auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bgm-btn:active{ transform: scale(.98); }
.bgm-btn.is-on{ background:rgba(255,255,255,.18); }
.bgm-btn.is-needtap{ animation: bgmPulse 1.05s ease-in-out infinite; }

.bgm-btn .bgm-ico{
  width:32px;
  height:32px;
  display:block;
}

@keyframes bgmPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
}

@media (max-width:480px){
  .bgm-btn{
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width:auto;
    height:auto;
    border-radius:0 !important;
  }
  .bgm-btn:active{ transform: scale(.94); }
}