:root{
  --bg1: rgba(20, 40, 70, .18);
  --bg2: rgba(130, 170, 210, .30);
  --ink: rgba(10, 12, 18, .86);
  --muted: rgba(10, 12, 18, .62);

  --glass: rgba(255,255,255,.18);
  --glass-2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.32);
  --shadow: 0 24px 70px rgba(0,0,0,.22);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.18);

  --radius: 14px;
  --radius-sm: 12px;

  --gap: clamp(10px, 2.2vw, 16px);
  --tile-h: clamp(72px, 9.5vw, 92px);
  --tile-wide: clamp(200px, 28vw, 300px);
  --tile-mini: clamp(72px, 10vw, 92px);

  --dock-h: clamp(54px, 7vw, 64px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  overflow: hidden;
}

.bg{
  position: relative;
  inset: 0;
  background: radial-gradient(1200px 800px at 50% 35%, rgba(255,255,255,.55), transparent 58%),
              radial-gradient(1200px 900px at 50% 70%, var(--bg2), transparent 58%),
              linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08)),
              radial-gradient(900px 700px at 30% 75%, var(--bg1), transparent 55%);
}
.bg__blur{
  position:absolute; inset:-30px;
  filter: blur(18px);
  transform: scale(1.06);
  background: inherit;
}
.bg__grain{
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .35;
  pointer-events:none;
}

.screen{
  position: relative;
  height: 100vh;
  width: 100%;
  padding: calc(20px + var(--safe-t)) calc(18px + var(--safe-r)) calc(20px + var(--safe-b)) calc(18px + var(--safe-l));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.5vw, 36px);
}

.hero{
  width: min(1100px, 96vw);
  text-align: center;
  margin-top: 0;
}
.clock{
  display: inline-flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vw, 14px);
  align-items: center;
  justify-content: center;
  padding: 8px 8px 0;
  user-select: none;
}
.clock__row{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 16px);
  letter-spacing: -0.02em;
  text-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.clock__hm{
  font-size: clamp(46px, 8vw, 78px);
  font-weight: 700;
}
.clock__sec{
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600;
  color: rgba(10,12,18,.62);
  margin-left: calc(clamp(46px, 8vw, 78px) * -0.02);
}
.clock__ampm{
  font-size: clamp(40px, 6.8vw, 72px);
  font-weight: 700;
}
.clock__date{
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 500;
  color: rgba(10,12,18,.78);
  text-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.tiles{
  width: min(1100px, 96vw);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.tiles__grid{
  display: grid;
  grid-template-columns: minmax(0, var(--tile-wide)) minmax(0, calc(var(--tile-mini) * 2 + var(--gap))) minmax(0, var(--tile-wide));
  gap: var(--gap);
  align-items: center;
  justify-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.tiles__col--stack{ display: grid; gap: var(--gap); }
.tiles__col--mini{
  display: grid;
  grid-template-columns: var(--tile-mini) var(--tile-mini);
  gap: var(--gap);
}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tile{
  height: var(--tile-h);
  width: var(--tile-wide);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tile{ 
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.11));
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tile::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 30% 10%, rgba(255,255,255,.42), transparent 55%);
  opacity: .55;
  pointer-events:none;
}

.tile::after{
  content:"";
  position:absolute;
  left: 14px; right: 14px; bottom: -12px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  filter: blur(14px);
  opacity: .28;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.tile:hover{
  animation: hoverBounce .55s ease-in-out infinite;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.45);
}
.tile:active{
  transform: translateY(1px) scale(.985);
}

.tile--wide{ width: var(--tile-wide); }
.tile--mini{
  width: var(--tile-mini);
  padding: 12px 10px 10px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.tile--mini .tile__label{ font-size: 11px; color: rgba(10,12,18,.70); }

.tile__icon{
  width: 34px; height: 34px;
  border-radius: 11px;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(255,255,255,.34);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  flex: 0 0 auto;
}
.tile__icon--mini{ width: 32px; height: 32px; border-radius: 10px; }

.tile__label{
  font-size: 15px;
  font-weight: 500;
  color: rgba(10,12,18,.76);
}

.tile svg{ width: 20px; height: 20px; opacity: .84; }
.tile--mini svg{ width: 18px; height: 18px; }

.tile.is-pressed{
  transform: translateY(2px) scale(.985) rotateX(0deg);
  opacity: .78;
}
.tile.is-pressed::after{
  opacity: .18;
  transform: translateY(4px);
}

/* Dock */
.dock{
  position: relative;
  margin-top: clamp(10px, 2.5vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dock__tray{
  pointer-events: auto;
  height: var(--dock-h);
  padding: 10px 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dock__btn{
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dock__btn:hover{
  animation: hoverBounceDock .55s ease-in-out infinite;
  box-shadow: 0 18px 32px rgba(0,0,0,.22);
}
.dock__btn:active{
  transform: translateY(1px) scale(.985);
  opacity: .78;
}
.dock__btn.is-pressed{
  transform: translateY(2px) scale(.985);
  opacity: .76;
}
.dock__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(80, 90, 120, .80);
}

/* Responsive */
@media (max-width: 1024px){
  .tiles__grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .tiles__col--stack, .tiles__col--mini{
    width: 100%;
    justify-content: center;
  }
  .tiles__col--mini{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    max-width: min(720px, 96vw);
  }
  .tile--mini{
    width: 100%;
    min-width: 72px;
  }
  .tile--wide{
    width: min(720px, 96vw);
  }
}

@media (max-width: 520px){
  .tiles__col--mini{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dock__btn{ width: 34px; height: 34px; }
  .dock__tray{ padding: 9px 10px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}


/* Hover bounce (runs only while hovered) */
@keyframes hoverBounce {
  0%, 100% { transform: translateY(-3px) rotateX(1.2deg); }
  50% { transform: translateY(-7px) rotateX(1.2deg); }
}

@keyframes hoverBounceDock {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(-7px); }
}

/* Tooltip pop-up (uses data-tooltip) */
[data-tooltip]{
  position: relative;
}
[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(10,12,18,.80);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.50));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
  z-index: 50;
}
[data-tooltip]:hover::after{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 6px));
}

/* Place tooltip above the icon area on wide tiles */
.tile--wide[data-tooltip]::after{
  left: 46px; /* aligns above icon box */
  transform: translate(-50%, -100%);
}
.tile--wide[data-tooltip]:hover::after{
  transform: translate(-50%, calc(-100% - 6px));
}

/* On touch devices, show tooltip on focus */
[data-tooltip]:focus-visible::after{
  opacity: 1;
  transform: translate(-50%, calc(-100% - 6px));
}

.clock__tz{
  margin-top: -6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(10,12,18,.55);
  letter-spacing: .02em;
  text-transform: none;
}
.clock__sep{
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  color: rgba(10,12,18,.62);
  transform: translateY(-0.1em);
}

.bg-link{
  display: block;
  cursor: pointer;
  text-decoration: none;
}
.bg-link:focus{ outline: none; }
.bg-link::after{ /* keep existing bg pseudo elements untouched */ }

/* Modal (responsive glass popup) */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  z-index: 1000;
}
.modal.is-open{ display: flex; }
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10,12,18,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__panel{
  position: relative;
  width: min(720px, 92vw);
  max-height: min(78vh, 720px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
}
.modal__title{
  font-size: 14px;
  font-weight: 700;
  color: rgba(10,12,18,.78);
}
.modal__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.35);
  color: rgba(10,12,18,.70);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform .14s ease, opacity .14s ease;
}
.modal__close:hover{ transform: translateY(-1px); }
.modal__close:active{ transform: translateY(1px) scale(.98); opacity:.78; }

.modal__body{
  padding: 16px;
  overflow: auto;
  color: rgba(10,12,18,.72);
  font-size: 13.5px;
  line-height: 1.55;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
}

/* Mobile: make it feel more native */
@media (max-width: 520px){
  .modal__panel{
    width: 94vw;
    max-height: 84vh;
    border-radius: 16px;
  }
  .modal__body{ padding: 14px; }
}