* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0b0f;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
body.hide-cursor { cursor: none; }

#stage { position: relative; width: 100%; height: 100%; }

/* ============ Fullscreen clock screen ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.2vh;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
  overflow: hidden;
}
.screen.active { opacity: 1; }

.badge {
  display: flex; align-items: center; gap: 1.1vw;
  z-index: 2;
  margin-bottom: 1.5vh;
}
.badge svg.flag {
  width: 5vw; min-width: 56px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.badge .names { display: flex; flex-direction: column; line-height: 1.15; }
.badge .name { font-size: 2vw; font-weight: 700; letter-spacing: .12em; }
.badge .city { font-size: 1.05vw; font-weight: 500; letter-spacing: .38em; opacity: .7; }

.date  { font-size: 3vw; font-weight: 600; letter-spacing: .1em; opacity: .65; z-index: 2; }
.time  {
  font-size: 13.5vw; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  z-index: 2;
}
.tzlab { font-size: 2.6vw; font-weight: 700; letter-spacing: .3em; opacity: .85; z-index: 2; }

.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ============ Country themes ============ */

/* South Korea — white field, taegeuk, red/blue bars */
.theme-kr { background: #f8f6f1; color: #1c1c1c; }
.theme-kr .time { color: #1c1c1c; }
.theme-kr .date { color: #0047A0; opacity: .8; }
.theme-kr .tzlab { color: #CD2E3A; }
.theme-kr::before, .theme-kr::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.8%; z-index: 1;
}
.theme-kr::before { top: 0; background: #CD2E3A; }
.theme-kr::after  { bottom: 0; background: #0047A0; }

/* Japan — white field, hinomaru */
.theme-jp { background: #faf8f4; color: #1c1c1c; }
.theme-jp .time { color: #1c1c1c; }
.theme-jp .date { color: #8a8a8a; }
.theme-jp .tzlab { color: #BC002D; }

/* China — red field, gold stars */
.theme-cn { background: linear-gradient(160deg, #9e0b17 0%, #c8102e 100%); color: #fff; }
.theme-cn .time { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.theme-cn .date { color: #fff; opacity: .6; }
.theme-cn .tzlab { color: #FFDE00; }

/* Australia — navy field, southern cross */
.theme-au { background: linear-gradient(160deg, #071847 0%, #10306e 100%); color: #fff; }
.theme-au .time { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
.theme-au .date { color: #fff; opacity: .6; }
.theme-au .tzlab { color: #7fb2ff; }

/* USA — navy field, star field, stripes */
.theme-us { background: linear-gradient(160deg, #0d1f45 0%, #16305f 100%); color: #fff; }
.theme-us .time { color: #fff; text-shadow: 0 4px 26px rgba(0,0,0,.45); }
.theme-us .date { color: #fff; opacity: .6; }
.theme-us .tzlab { color: #ff5b66; }

/* Brazil — green field, golden rhombus */
.theme-br { background: linear-gradient(160deg, #00542e 0%, #00753f 100%); color: #fff; }
.theme-br .time { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.theme-br .date { color: #fff; opacity: .6; }
.theme-br .tzlab { color: #FFDF00; }

/* United Kingdom — union jack */
.theme-gb { background: #012169; color: #fff; }
.theme-gb .time { color: #fff; text-shadow: 0 4px 26px rgba(0,0,0,.55); }
.theme-gb .date { color: #fff; opacity: .6; }
.theme-gb .tzlab { color: #ff6b74; }
.theme-gb .deco {
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%, rgba(1,33,105,.94) 0%, rgba(1,33,105,.55) 55%, rgba(1,33,105,0) 100%),
    linear-gradient(0deg,   transparent 44.5%, #C8102E 44.5%, #C8102E 55.5%, transparent 55.5%),
    linear-gradient(90deg,  transparent 47%,   #C8102E 47%,   #C8102E 53%,   transparent 53%),
    linear-gradient(0deg,   transparent 41%,   #fff 41%,      #fff 59%,      transparent 59%),
    linear-gradient(90deg,  transparent 45%,   #fff 45%,      #fff 55%,      transparent 55%),
    linear-gradient(31deg,  transparent 48.4%, #C8102E 48.4%, #C8102E 51.6%, transparent 51.6%),
    linear-gradient(-31deg, transparent 48.4%, #C8102E 48.4%, #C8102E 51.6%, transparent 51.6%),
    linear-gradient(31deg,  transparent 45.5%, #fff 45.5%,    #fff 54.5%,    transparent 54.5%),
    linear-gradient(-31deg, transparent 45.5%, #fff 45.5%,    #fff 54.5%,    transparent 54.5%),
    #012169;
  opacity: .38;
}

/* France — tricolour bands */
.theme-fr { color: #0b1c48; }
.theme-fr .deco {
  background: linear-gradient(90deg,
    #002395 0%, #002395 24%,
    #f6f4ef 24%, #f6f4ef 76%,
    #ED2939 76%, #ED2939 100%);
}
.theme-fr .time { color: #0b1c48; }
.theme-fr .date { color: #002395; opacity: .7; }
.theme-fr .tzlab { color: #ED2939; }

/* Germany — black field, red/gold bands */
.theme-de { background: #121212; color: #fff; }
.theme-de .time { color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.5); }
.theme-de .date { color: #fff; opacity: .55; }
.theme-de .tzlab { color: #FFCE00; }
.theme-de::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; z-index: 1;
  background: linear-gradient(180deg, #DD0000 0%, #DD0000 50%, #FFCE00 50%, #FFCE00 100%);
}

/* ============ Single-country page chrome ============ */
#home {
  position: absolute; left: 16px; bottom: 14px; z-index: 30;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: #fff; background: rgba(0,0,0,.45);
  padding: 7px 13px; border-radius: 7px;
  text-decoration: none; opacity: .18;
  transition: opacity .3s;
}
#home:hover { opacity: 1; }

#sync {
  position: absolute; right: 16px; bottom: 14px; z-index: 30;
  font-size: 12px; letter-spacing: .06em;
  color: #fff; background: rgba(0,0,0,.45);
  padding: 6px 12px; border-radius: 7px;
  transition: opacity 1.2s; pointer-events: none;
}
#sync.gone { opacity: 0; }
#sync .ok { color: #6fe3a1; }
#sync .warn { color: #ffd166; }

/* ============ Cycle page ============ */
#dots {
  position: absolute; bottom: 3.2vh; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 10;
}
#dots .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: currentColor; opacity: .25;
  transition: opacity .4s, transform .4s;
  cursor: pointer;
}
#dots .dot.on { opacity: .95; transform: scale(1.35); }
.light-dots { color: #1c1c1c; }
.dark-dots  { color: #ffffff; }

#paused {
  position: absolute; left: 16px; top: 14px; z-index: 20;
  display: none;
  font-size: 14px; font-weight: 700; color: #fff;
  background: rgba(200,16,46,.85);
  padding: 6px 12px; border-radius: 6px; letter-spacing: .1em;
}
body.paused #paused { display: block; }

#hint {
  position: absolute; right: 16px; top: 14px; z-index: 20;
  font-size: 13px; color: #fff; background: rgba(0,0,0,.55);
  padding: 8px 14px; border-radius: 8px; letter-spacing: .03em;
  transition: opacity 1s; pointer-events: none;
}
#hint.gone { opacity: 0; }

/* ============ Hub (index) page ============ */
#hub {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: #0b0b0f; color: #fff;
  padding: 2vh 2vw;
  gap: 1.6vh;
}
#hub header { display: flex; align-items: baseline; justify-content: space-between; }
#hub h1 { font-size: 2vw; font-weight: 800; letter-spacing: .3em; }
#hub .sub { font-size: .95vw; letter-spacing: .14em; opacity: .5; }
#hub .links { display: flex; gap: .8vw; }
#hub .cycle-link {
  font-size: .95vw; font-weight: 700; letter-spacing: .12em;
  color: #0b0b0f; background: #fff; text-decoration: none;
  padding: .7vh 1.2vw; border-radius: 8px;
}
#hub .cycle-link:hover { background: #ffd166; }

#grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  min-height: 0;
}
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4vh; border-radius: 12px;
  text-decoration: none;
  outline: 2px solid transparent;
  transition: transform .15s, outline-color .15s;
}
.card:hover { transform: scale(1.015); outline-color: rgba(255,255,255,.55); z-index: 2; }
.card .badge { margin-bottom: .2vh; gap: .7vw; }
.card .badge svg.flag { width: 2.4vw; min-width: 32px; }
.card .name { font-size: 1vw; }
.card .city { font-size: .62vw; letter-spacing: .28em; }
.card .date  { font-size: .95vw; }
.card .time  { font-size: 3.6vw; font-weight: 800; }
.card .tzlab { font-size: .85vw; letter-spacing: .25em; }
.card.theme-kr::before, .card.theme-kr::after { height: 6px; }

#hub footer {
  display: flex; justify-content: space-between;
  font-size: .85vw; letter-spacing: .08em; opacity: .55;
}

/* ---- live broadcast board: grid only, zero interactivity ---- */
body.live #hub { padding: 8px; gap: 0; }
body.live .card { cursor: default; }
body.live .card:hover { transform: none; outline-color: transparent; }
body.live .card .time { font-size: 3.9vw; }