:root {
  /* Dark theme palette */
  --bg-dark: #2C2D3A;
  --card-dark: #3B3C4E;
  --text-dark: #F3F4F9;
  --text-sub-dark: #B4B6C9;
  --border-dark: #555770;
  /* Light theme palette */
  --bg-light: #F8F9FD;
  --card-light: #EDEFF8;
  --text-light: #2C2D3A;
  --text-sub-light: #676985;
  --border-light: #D0D3E8;
  /* fixed accent color set */
  --green: #72D1B9;
  --pink: #F89BA8;
  --yellow: #FFD489;
  --blue: #89C7ED;
  --purple: #C8A8E8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Comic Sans MS", sans-serif;
}

body.dark {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}
body.light {
  background-color: var(--bg-light);
  color: var(--text-light);
}

/* fixed top header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  z-index: 999;
  transition: background 0.3s, border 0.3s;
}
body.dark .header {
  background-color: var(--bg-dark);
  border-bottom: 2px solid var(--border-dark);
}
body.light .header {
  background-color: var(--bg-light);
  border-bottom: 2px solid var(--border-light);
}
.header h1 {
  font-size: clamp(2rem,7vw,3.2rem);
  margin-bottom: 10px;
}
#themeBtn {
  padding:7px 18px;
  border-radius:999px;
  border:none;
  background:var(--yellow);
  color:#222;
  font-size:15px;
  cursor:pointer;
}

/* main container offset for fixed header */
.container {
  max-width:820px;
  margin:0 auto;
  padding: calc(135px + 20px) 15px 40px;
}

/* main unit panel */
.unit_box {
  border-radius:10px;
  padding:30px 20px;
  border:3px solid;
  transition:border-color 0.3s, background-color 0.3s;
}
body.dark .unit_box {
  border-color:var(--border-dark);
  background-color:var(--card-dark);
}
body.light .unit_box {
  border-color:var(--border-light);
  background-color:var(--card-light);
}

.unit_title {
  text-align:center;
  font-size:clamp(1.7rem,5vw,2.3rem);
  margin-bottom:55px;
  padding-bottom:10px;
  border-bottom:2px solid currentColor;
}

/* wrap all map items, full center alignment */
.map_wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:65px;
  position:relative;
}

/* single stage wrapper: button top, text below */
.day_item {
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.day_text {
  margin-top:12px;
  font-size:clamp(1.2rem,4vw,1.6rem);
  text-align:center;
}

/* round 3D gradient action button */
.challange_btn {
  width:72px;
  height:72px;
  border-radius:50%;
  display:block;
  transition:transform 0.18s ease;
}
.challange_btn:active {
  transform: translateY(4px);
}
.b1 {background:linear-gradient(135deg, var(--blue), var(--yellow)); }
.b1:active {box-shadow:0 2px 0 var(--yellow);}
.b2 {background:linear-gradient(135deg, var(--green), var(--blue));}
.b3 {background:linear-gradient(135deg, var(--purple), var(--pink));}

/* path image wrapper setting */
.path-line {
  width: 80px;
  height: 80px;
}
.path-left {
  background: url(sources/path_left.png) no-repeat;
  background-size: 100% 100%;
  transform: translateX(-30px);
}
.path-right {
  background: url(sources/path_left.png) no-repeat;
  background-size: 100% 100%;
  transform: translateX(30px);
}