:root {
  --bg: #0B0F0E;
  --card: #151B19;
  --line: #26302D;
  --line-strong: #3A4642;
  --text: #F2F5F4;
  --muted: #A3B1AC;
  --dim: #6F7D78;
  --lime: #C6F432;
  --lime-ink: #0B0F0E;
  --blue: #7FB2FF;
  --warn-bg: #2E1F08;
  --warn: #FFD08A;
  --urgent-bg: #3A1608;
  --urgent: #FFB08F;
  --num: 'Barlow Condensed', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* 上方：等級與 XP */
.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.level-row { display: flex; align-items: baseline; justify-content: space-between; }
.level-row .lv { font-family: var(--num); font-size: 26px; font-weight: 800; color: var(--lime); margin-right: 8px; }
.level-row .xp { font-family: var(--num); font-size: 18px; color: var(--muted); }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--lime); transition: width 0.4s ease; }
.next-text { font-size: 12px; color: var(--muted); margin-top: 4px; }
.test-banner { margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: #2A1F3A; color: #D8C2FF; font-size: 12px; }

.main {
  flex: 1;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1, h2 { margin: 0; line-height: 1.3; }
h1 { font-size: 26px; font-weight: 900; }
h2 { font-size: 18px; font-weight: 900; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.card { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }

/* 建立挑戰表單 */
.kicker { font-family: var(--num); font-size: 14px; letter-spacing: 0.22em; color: #FF9A62; }
.hero-title span { color: var(--lime); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > .label { font-size: 15px; font-weight: 700; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  min-height: 52px; padding: 8px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: transparent;
  font-size: 16px; font-weight: 700;
}
.choice[aria-pressed="true"] { border: 2px solid var(--lime); background: #1A2410; color: var(--lime); }
.text-input {
  width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--bg); font-size: 17px;
}
/* iPhone 的時間欄位有自己的最小寬度，會撐出框外；改成跟一般輸入框一樣 */
.text-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 50px;
  text-align: left;
}
.text-input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; font-size: 24px;
}
.stepper .num { font-family: var(--num); font-size: 36px; font-weight: 800; min-width: 48px; text-align: center; }

.btn-primary {
  width: 100%; min-height: 60px; border: 0; border-radius: 18px;
  background: var(--lime); color: var(--lime-ink); font-size: 20px; font-weight: 900;
}
.btn-secondary {
  width: 100%; min-height: 50px; border-radius: 14px;
  border: 1px solid var(--line-strong); background: transparent; font-size: 16px;
}
.error { color: var(--urgent); font-size: 14px; min-height: 20px; }

/* 今天 */
.today-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #1A2410; color: var(--lime); font-size: 13px; font-weight: 700; }
.goal { font-size: 22px; font-weight: 900; margin-top: 6px; word-break: break-word; }
.day-count { font-family: var(--num); font-size: 48px; font-weight: 800; line-height: 0.9; white-space: nowrap; }
.day-count small { font-size: 22px; color: var(--muted); }

.clock {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
}
.clock .title { font-size: 14px; font-weight: 700; }
.clock .sub { font-size: 12px; opacity: 0.85; }
.clock .time { font-family: var(--num); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.clock.warn { background: var(--warn-bg); border-color: #FFB15C; color: var(--warn); }
.clock.urgent { background: var(--urgent-bg); border-color: #FF7A45; color: var(--urgent); animation: blink 1.2s ease-in-out infinite; }
.clock.done { color: var(--muted); }
@keyframes blink { 50% { opacity: 0.55; } }

.actions { display: flex; flex-direction: column; gap: 8px; }
.done-box {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-strong);
  color: var(--lime); font-size: 18px; font-weight: 900;
}

/* 進度格 */
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cell {
  aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--num); font-size: 17px; font-weight: 700;
  background: var(--card); color: var(--dim); border: 1px solid var(--line);
}
.cell.done { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.cell.back { background: var(--blue); color: var(--lime-ink); border-color: var(--blue); }
.cell.rest { background: transparent; border: 2px dashed var(--muted); color: var(--muted); }
.cell.miss { background: #1C2321; color: #4A5753; text-decoration: line-through; }
.cell.today { border: 3px solid var(--lime); color: var(--lime); animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 244, 50, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(198, 244, 50, 0); } }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

.note { font-size: 12px; color: var(--dim); }
.link-btn {
  align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  color: var(--dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}

/* 結束畫面 */
.end { align-items: center; text-align: center; }
.ring {
  width: 176px; height: 176px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 8px auto;
}
.ring > div {
  width: 148px; height: 148px; border-radius: 50%; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring .pct { font-family: var(--num); font-size: 54px; font-weight: 800; line-height: 1; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pill { padding: 6px 12px; border-radius: 999px; background: #1A2410; color: var(--lime); font-size: 14px; font-weight: 700; }

/* 紀錄 */
.history-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.history-item:first-of-type { border-top: 0; }

/* 底部選單 */
.tabs {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg); border-top: 1px solid var(--line);
}
.tabs button { min-height: 60px; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.tabs button[aria-current="page"] { color: var(--lime); font-weight: 900; box-shadow: inset 0 3px 0 var(--lime); }

/* XP 泡泡：蓋在上方等級列之上，往上飄，從上往下淡出 */
@property --fade {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -40%;
}
.toast {
  position: fixed; left: 50%; top: 150px; z-index: 20; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 999px; background: var(--lime); color: var(--lime-ink);
  font-weight: 900; font-size: 18px; white-space: nowrap; pointer-events: none;
  opacity: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --fade: -40%;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade), #000 calc(var(--fade) + 40%));
  mask-image: linear-gradient(to bottom, transparent var(--fade), #000 calc(var(--fade) + 40%));
}
.toast.show { animation: pop 1.8s ease-out forwards; }
@keyframes pop {
  0% { transform: translate(-50%, 16px) scale(0.85); opacity: 0; --fade: -40%; }
  15% { transform: translate(-50%, 0) scale(1.05); opacity: 1; --fade: -40%; }
  25% { transform: translate(-50%, 0) scale(1); }
  55% { transform: translate(-50%, -16px); --fade: -40%; }
  95% { opacity: 1; }
  100% { transform: translate(-50%, -64px); opacity: 0; --fade: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.today, .clock.urgent { animation: none; }
  .toast.show { animation-duration: 2.4s; }
}