/* =========================
   Fantasy Digital Clock (base.css)
   ========================= */

/* box30は既存style.cssの見た目を崩さないため触らない */
/* 横はみ出し対策は中身側（clockWrap / fantasyClock）で行う */

.clockWrap {
  /* box30の中で余白を作る（上下ギチギチ対策 + 左右の安全余白） */
  width: 100%;
  box-sizing: border-box;
  padding: 18px 16px 20px;  /* ← ここが左右余白の本体 */
  margin: 6px 0 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fantasyClock {
  /* はみ出し防止の要：border/padding込みで100%以内 */
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;

  text-align: center;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.08em;

  padding: 18px 18px;
  border-radius: 22px;

  /* ふわっとしたファンタジー感 */
  background:
    radial-gradient(120px 80px at 18% 25%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(160px 120px at 80% 35%, rgba(255,255,255,0.65), rgba(255,255,255,0) 65%),
    linear-gradient(135deg, rgba(214,245,255,0.95), rgba(250,235,255,0.95));
  border: 2px solid rgba(108, 200, 247, 0.65);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.12),
    inset 0 0 0 2px rgba(255,255,255,0.65);

  position: relative;
  overflow: hidden;
}

/* キラキラの流れ（控えめ） */
.fantasyClock::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,0.65), rgba(255,255,255,0) 55%);
  transform: rotate(18deg);
  animation: sparkle 6s linear infinite;
  pointer-events: none;
}

@keyframes sparkle {
  0%   { transform: translateX(-25%) translateY(-10%) rotate(18deg); opacity: 0.35; }
  50%  { opacity: 0.18; }
  100% { transform: translateX(25%) translateY(10%) rotate(18deg); opacity: 0.35; }
}

.clockSub {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.75;
  text-align: center;
}

/* スマホでの見やすさ */
@media (max-width: 480px) {
  .clockWrap {
    padding: 16px 12px 18px; /* スマホは左右を少しだけ縮める */
  }
  .fantasyClock {
    border-radius: 18px;
    padding: 14px 12px;
    font-size: clamp(2.0rem, 9vw, 2.8rem);
  }
}