/* Gamified staff app. Warm cream ground, deep teal, gold for XP and
   rewards, coral for streaks. Chunky, pressable shapes like a mobile game,
   with soft depth: gradients, glows and layered shadows. Staff screens only. */
.gt, .gt-cam, .gt-reward {
  --gt-bg: #FFF8EC;
  --gt-bg-2: #FDF0DA;
  --gt-card: #FFFFFF;
  --gt-line: #EFE4D1;
  --gt-track: #F1E9DB;
  --gt-ink: #1B1F1D;
  --gt-muted: #6A6F6B;
  --gt-teal: #0F5E57;
  --gt-teal-2: #14786D;
  --gt-teal-dark: #093B36;
  --gt-teal-soft: #DCEBE7;
  --gt-mint: #5FC4B2;
  --gt-gold: #F2B233;
  --gt-gold-2: #FFD36B;
  --gt-gold-dark: #B9841A;
  --gt-gold-ink: #3D2A00;
  --gt-gold-soft: #FCEBC4;
  --gt-coral: #E8704F;
  --gt-coral-dark: #A3432F;
  --gt-coral-soft: #FDE3D9;
  --gt-purple: #8B6CC9;
  --gt-purple-dark: #5E4494;
  --gt-shadow: 0 1px 2px rgba(61, 42, 0, .06), 0 10px 28px -12px rgba(61, 42, 0, .22);
}
.gt {
  min-height: 100dvh;
  color: var(--gt-ink);
  color-scheme: light;
  background:
    radial-gradient(90% 40% at 100% 0%, rgba(242, 178, 51, .16), transparent 70%),
    radial-gradient(70% 30% at 0% 35%, rgba(95, 196, 178, .12), transparent 70%),
    var(--gt-bg);
}
body:has(.gt) { background: #FFF8EC; }
body.gt-locked { overflow: hidden; }

.gt .ic, .gt-cam .ic, .gt-reward .ic { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; }

.gt-content { max-width: 480px; margin: 0 auto; padding: 14px 16px calc(128px + env(safe-area-inset-bottom, 0px)); }
.gt-page { display: grid; gap: 16px; animation: gt-in .35s ease-out both; }
.gt-row { display: flex; align-items: center; gap: 10px; }
.gt-row.between { justify-content: space-between; }
.gt-muted { color: var(--gt-muted); font-size: .82rem; font-weight: 600; }
.gt h1, .gt h2, .gt-cam h2, .gt-reward h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.015em; }
.gt h2 { font-size: 1.2rem; }
.gt-title { font-size: 2rem; padding-top: 6px; }
.gt-section-head { margin-top: 4px; align-items: flex-end; }
.gt-section-head > div { display: grid; gap: 2px; }
.gt-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: #A9E0D5; }
.gt-eyebrow.light { color: #A9E0D5; }
.num, .gt-stat strong, .gt-quest-xp, .gt-hist-xp { font-variant-numeric: tabular-nums; }

.gt-card { background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 24px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: var(--gt-shadow); }
.gt-chip { font-size: .74rem; font-weight: 800; padding: 6px 11px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.gt-chip.gold { background: linear-gradient(180deg, var(--gt-gold-2), var(--gt-gold)); color: var(--gt-gold-ink); box-shadow: 0 3px 0 var(--gt-gold-dark), 0 6px 14px -4px rgba(185, 132, 26, .6); }

/* Progress rings */
.gt-ring { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.gt-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gt-ring-track { stroke: rgba(255, 255, 255, .18); }
.gt-ring-fill { stroke: var(--gt-gold); filter: drop-shadow(0 0 4px rgba(242, 178, 51, .7)); transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.gt-ring-inner { position: relative; display: grid; justify-items: center; line-height: 1; }
.gt-ring.level .gt-ring-inner strong { font: 800 1.7rem/1 var(--font-display); color: #fff; }
.gt-ring-lv { font-size: .55rem; font-weight: 800; letter-spacing: .16em; color: var(--gt-gold-2); margin-bottom: 2px; }
.gt-ring.quests .gt-ring-track { stroke: var(--gt-track); }
.gt-ring.quests .gt-ring-fill { stroke: var(--gt-teal); filter: none; }
.gt-ring.quests strong { font-size: .72rem; font-weight: 800; color: var(--gt-teal); }

/* Home hero */
.gt-hero {
  position: relative; overflow: hidden; border-radius: 30px; padding: 18px 18px 20px; color: #fff; display: grid; gap: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 211, 107, .35), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(95, 196, 178, .35), transparent 60%),
    linear-gradient(160deg, var(--gt-teal-2), var(--gt-teal) 55%, var(--gt-teal-dark));
  box-shadow: 0 16px 34px -18px rgba(9, 59, 54, .8), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.gt-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .05); pointer-events: none; }
.gt-hero-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.gt-avatar {
  position: relative; width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 3px solid rgba(255, 255, 255, .9); background: linear-gradient(145deg, #FBE4DA, #F3C9BA); color: #8A3A26;
  font: 800 .95rem var(--font-body); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
.gt-hello { flex: 1; display: grid; min-width: 0; }
.gt-hello span { color: #CDE7E1; font-size: .85rem; font-weight: 600; }
.gt-hello strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-streak {
  display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 1.05rem; backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.gt-streak .ic { color: #FFB199; width: 20px; height: 20px; }
.gt-streak.hot { background: linear-gradient(180deg, #FF9A76, var(--gt-coral)); border-color: transparent; box-shadow: 0 4px 0 var(--gt-coral-dark), 0 8px 18px -6px rgba(232, 112, 79, .8); }
.gt-streak.hot .ic { color: #FFF3C4; animation: gt-flicker 1.6s ease-in-out infinite; }
.gt-streak.dark { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; box-shadow: none; }
.gt-hero-level { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; background: rgba(0, 0, 0, .14); border-radius: 22px; padding: 12px 14px; }
.gt-hero-xp { flex: 1; display: grid; gap: 8px; min-width: 0; }
.gt-hero-xp strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.gt-hero-xp .gt-row span { color: var(--gt-gold-2); font-weight: 800; font-size: .9rem; }
.gt-hero-next { color: #CDE7E1; font-size: .78rem; font-weight: 600; }

/* Admin shortcut (admins viewing their own staff app), sits on the dark hero */
.gt-admin {
  height: 40px; padding: 0 14px; border-radius: 20px; cursor: pointer;
  background: #fff; color: var(--gt-teal); border: 0; font: 800 .8rem var(--font-body);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}
.gt-admin:focus-visible { outline: 3px solid var(--gt-gold, #F2B233); outline-offset: 3px; }

/* XP bars */
.gt-xp { display: grid; gap: 8px; }
.gt-xp-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; gap: 8px; }
.gt-xp-top span { color: var(--gt-muted); font-weight: 700; }
.gt-xp.dark .gt-xp-top, .gt-xp.dark .gt-xp-top span { color: #CFE5E0; }
.gt-bar { height: 14px; border-radius: 999px; background: var(--gt-track); overflow: hidden; position: relative; }
.gt-bar span {
  display: block; height: 100%; border-radius: 999px; position: relative; min-width: 14px;
  background: linear-gradient(90deg, var(--gt-gold), var(--gt-gold-2));
  transition: width .9s cubic-bezier(.2, .8, .2, 1);
}
.gt-bar span::after { content: ''; position: absolute; left: 6px; right: 8px; top: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.gt-bar.glow, .gt-xp.dark .gt-bar, .gt-bar.light { background: rgba(0, 0, 0, .22); }
.gt-bar.glow span { box-shadow: 0 0 14px rgba(255, 211, 107, .75); }
.gt-bar.light span { background: linear-gradient(90deg, var(--gt-mint), #9BE7D8); }

/* Mission card */
.gt-mission {
  position: relative; overflow: hidden; color: var(--gt-ink); border-radius: 28px; padding: 20px 18px 16px;
  display: grid; gap: 14px; background: linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border: 1px solid var(--gt-line); box-shadow: var(--gt-shadow);
}
.gt-mission-deco { position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 178, 51, .22) 0 35%, transparent 36%), radial-gradient(circle, transparent 0 55%, rgba(242, 178, 51, .12) 56% 62%, transparent 63%); }
.gt-mission > * { position: relative; }
.gt-mission > .gt-mission-deco { position: absolute; }
.gt-mission .gt-eyebrow { color: var(--gt-teal-2); }
.gt-mission h1 { font-size: 1.6rem; line-height: 1.12; text-wrap: balance; }
.gt-mission h2 { font-size: 1.3rem; }
.gt-mission-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--gt-bg); border-radius: 18px; padding: 10px 4px; }
.gt-mission-times > div { display: grid; justify-items: center; gap: 2px; }
.gt-mission-times > div + div { border-left: 1px solid var(--gt-line); }
.gt-mission-times span { font-size: .68rem; font-weight: 700; color: var(--gt-muted); text-transform: uppercase; letter-spacing: .06em; }
.gt-mission-times strong { font: 800 1rem var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt-mission-sub { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--gt-muted); font-size: .8rem; font-weight: 600; text-align: center; }
.gt-mission-sub .ic { width: 15px; height: 15px; }
/* the dark variant (next badge on the rewards page) */
.gt-mission.small { background: linear-gradient(160deg, var(--gt-teal-2), var(--gt-teal-dark)); color: #fff; border: 0; gap: 8px; box-shadow: 0 14px 30px -16px rgba(9, 59, 54, .8); }
.gt-mission.small .gt-eyebrow { color: #A9E0D5; }
.gt-mission.small .gt-mission-sub { color: #CFE5E0; justify-content: flex-start; text-align: left; }

/* Buttons */
.gt-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 58px; border: 0; border-radius: 20px; font: 800 1.05rem var(--font-body);
  letter-spacing: .06em; cursor: pointer; transition: transform .08s, box-shadow .08s, filter .15s;
}
.gt-btn:hover { filter: brightness(1.04); }
.gt-btn:active { transform: translateY(4px); box-shadow: none !important; }
.gt-btn:disabled { opacity: .6; }
.gt-btn.gold {
  background: linear-gradient(180deg, var(--gt-gold-2), var(--gt-gold) 60%); color: var(--gt-gold-ink);
  box-shadow: 0 5px 0 var(--gt-gold-dark), 0 14px 24px -10px rgba(185, 132, 26, .75);
}
.gt-btn.gold::before { content: ''; position: absolute; left: 14px; right: 14px; top: 6px; height: 40%; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent); pointer-events: none; }
.gt-btn.white { background: #fff; color: var(--gt-teal); box-shadow: 0 5px 0 var(--gt-teal-dark), 0 14px 24px -10px rgba(0, 0, 0, .4); }
.gt-btn.ghost { background: transparent; color: inherit; border: 2px solid var(--gt-line); min-height: 50px; font-size: .92rem; letter-spacing: .02em; }
.gt-mission .gt-btn.ghost { color: var(--gt-teal); border-color: var(--gt-teal-soft); background: var(--gt-teal-soft); }
.gt-btn:focus-visible, .gt-tab:focus-visible, .gt-tab-clock:focus-visible, .gt-avatar:focus-visible { outline: 3px solid var(--gt-coral); outline-offset: 3px; }

/* Quests */
.gt-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gt-quest { background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 20px; padding: 11px 12px; display: flex; align-items: center; gap: 12px; box-shadow: var(--gt-shadow); }
.gt-quest-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, #FFF3D6, var(--gt-gold-soft)); color: #8A5A00; flex-shrink: 0; }
.gt-quest-label { flex: 1; font-weight: 700; font-size: .92rem; }
.gt-quest-xp { font-weight: 800; font-size: .78rem; color: #8A5A00; background: var(--gt-gold-soft); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.gt-quest.done { background: linear-gradient(180deg, #F3FAF8, #E8F4F1); border-color: #CFE5DF; box-shadow: none; }
.gt-quest.done .gt-quest-ic { background: linear-gradient(145deg, var(--gt-teal-2), var(--gt-teal)); color: #fff; }
.gt-quest.done .gt-quest-label { color: var(--gt-muted); text-decoration: line-through; text-decoration-color: rgba(15, 94, 87, .4); }
.gt-quest.done .gt-quest-xp { color: var(--gt-teal); background: #fff; }
.gt-quest.missed { opacity: .5; box-shadow: none; }

/* Week strip */
.gt-week { display: flex; justify-content: space-between; gap: 6px; }
.gt-day { display: grid; justify-items: center; gap: 7px; flex: 1; }
.gt-day-name { font-size: .72rem; font-weight: 700; color: var(--gt-muted); text-transform: uppercase; letter-spacing: .04em; }
.gt-day-dot {
  width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center;
  background: var(--gt-track); color: var(--gt-muted); font-weight: 800; font-size: .85rem;
}
.gt-day-dot .ic { width: 18px; height: 18px; }
.gt-day.ok .gt-day-dot { background: linear-gradient(145deg, var(--gt-teal-2), var(--gt-teal)); color: #fff; box-shadow: 0 3px 0 var(--gt-teal-dark); }
.gt-day.late .gt-day-dot { background: var(--gt-gold-soft); color: #8A5A00; box-shadow: 0 3px 0 #E8CF95; }
.gt-day.miss .gt-day-dot { background: var(--gt-coral-soft); color: var(--gt-coral-dark); }
.gt-day.today .gt-day-dot { background: #fff; border: 2px dashed var(--gt-teal); color: var(--gt-teal); }
.gt-day.today .gt-day-name { color: var(--gt-teal); }
.gt-legend { display: flex; gap: 14px; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--gt-muted); }
.gt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gt-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; }
.gt-legend .ok::before { background: var(--gt-teal); }
.gt-legend .late::before { background: var(--gt-gold); }
.gt-legend .miss::before { background: var(--gt-coral); }

/* Floating tab bar */
.gt-tabs {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  max-width: 460px; margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(239, 228, 209, .9); border-radius: 26px; padding: 6px 6px;
  box-shadow: 0 18px 40px -16px rgba(61, 42, 0, .35), 0 2px 6px rgba(61, 42, 0, .06);
}
.gt-tab {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; min-height: 52px; border-radius: 18px;
  color: #7A7F7B; text-decoration: none; font-size: .68rem; font-weight: 700; transition: background .15s, color .15s;
}
.gt-tab .ic { width: 23px; height: 23px; }
.gt-tab.active { color: var(--gt-teal); background: var(--gt-teal-soft); font-weight: 800; }
.gt-tab-clock {
  width: 64px; height: 64px; margin-top: -34px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, var(--gt-gold-2), var(--gt-gold) 65%); color: var(--gt-gold-ink);
  border: 5px solid #fff; display: grid; place-items: center;
  box-shadow: 0 5px 0 var(--gt-gold-dark), 0 0 0 6px rgba(242, 178, 51, .18), 0 16px 26px -10px rgba(185, 132, 26, .8);
  animation: gt-breathe 2.8s ease-in-out infinite;
}
.gt-tab-clock .ic { width: 28px; height: 28px; }
.gt-tab-clock:active { transform: translateY(4px); box-shadow: none; animation: none; }

/* Rewards: trophy room */
.gt-trophy {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; text-align: center; color: #fff;
  border-radius: 30px; padding: 22px 16px 16px;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(255, 211, 107, .35), transparent 70%),
    linear-gradient(170deg, var(--gt-teal-2), var(--gt-teal) 50%, var(--gt-teal-dark));
  box-shadow: 0 16px 34px -18px rgba(9, 59, 54, .8);
}
.gt-trophy-deco { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% 36%, rgba(255, 255, 255, .07) 0 8deg, transparent 8deg 24deg); }
.gt-trophy > * { position: relative; }
.gt-trophy > .gt-trophy-deco { position: absolute; }
.gt-trophy .gt-ring.level .gt-ring-inner strong { font-size: 3rem; }
.gt-trophy .gt-ring-lv { font-size: .7rem; }
.gt-trophy-name { font: 800 1.5rem/1.1 var(--font-display); margin-top: 4px; }
.gt-trophy-xp { color: #CDE7E1; font-size: .85rem; font-weight: 600; }
.gt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 8px; background: rgba(0, 0, 0, .16); border-radius: 20px; padding: 10px 0; }
.gt-stat { display: grid; justify-items: center; gap: 2px; }
.gt-stat + .gt-stat { border-left: 1px solid rgba(255, 255, 255, .15); }
.gt-stat strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: #fff; }
.gt-stat strong.gold { color: var(--gt-gold-2); }
.gt-stat strong.coral { color: #FFB199; }
.gt-stat strong.teal { color: #9BE7D8; }
.gt-stat span { font-size: .7rem; font-weight: 700; color: #CDE7E1; }

.gt-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gt-badge { background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 22px; padding: 16px 6px 12px; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; box-shadow: var(--gt-shadow); }
.gt-badge strong { font-size: .78rem; font-weight: 800; line-height: 1.2; }
.gt-badge > span:last-child { font-size: .68rem; color: var(--gt-muted); font-weight: 600; line-height: 1.25; }
.gt-badge-ic { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #EDE3D2; color: #9A958B; }
.gt-badge-ic .ic { width: 26px; height: 26px; position: relative; z-index: 1; }
.gt-badge-ic:not(:empty)::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); pointer-events: none; }
.gt-badge-ic.gold { background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--gt-gold) 55%, var(--gt-gold-dark)); color: var(--gt-gold-ink); box-shadow: 0 4px 0 var(--gt-gold-dark), 0 8px 16px -6px rgba(185, 132, 26, .7); }
.gt-badge-ic.coral { background: radial-gradient(circle at 35% 30%, #FFC0A8, var(--gt-coral) 55%, var(--gt-coral-dark)); color: #fff; box-shadow: 0 4px 0 var(--gt-coral-dark), 0 8px 16px -6px rgba(232, 112, 79, .7); }
.gt-badge-ic.teal { background: radial-gradient(circle at 35% 30%, #5FB3A8, var(--gt-teal) 55%, var(--gt-teal-dark)); color: #fff; box-shadow: 0 4px 0 var(--gt-teal-dark), 0 8px 16px -6px rgba(9, 59, 54, .6); }
.gt-badge-ic.mint { background: radial-gradient(circle at 35% 30%, #C6F2E8, var(--gt-mint) 55%, #2E8C7C); color: #0B3B36; box-shadow: 0 4px 0 #2E8C7C, 0 8px 16px -6px rgba(46, 140, 124, .6); }
.gt-badge-ic.purple { background: radial-gradient(circle at 35% 30%, #CDBDF0, var(--gt-purple) 55%, var(--gt-purple-dark)); color: #fff; box-shadow: 0 4px 0 var(--gt-purple-dark), 0 8px 16px -6px rgba(94, 68, 148, .6); }
.gt-badge:not(.locked) { background: linear-gradient(180deg, #FFFFFF, #FFFaF0); }
.gt-badge.locked { background: rgba(255, 255, 255, .5); border-style: dashed; border-color: #DCCFB8; box-shadow: none; }
.gt-badge.locked strong { color: var(--gt-muted); }

.gt-history { list-style: none; margin: 0; padding: 4px 16px; background: var(--gt-card); border: 1px solid var(--gt-line); border-radius: 24px; box-shadow: var(--gt-shadow); }
.gt-history li { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: 'dot day pill xp' 'dot time pill xp'; align-items: center; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gt-track); }
.gt-history li:last-child { border-bottom: 0; }
.gt-hist-dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: #D8CDB8; }
.gt-hist-dot.ok { background: var(--gt-teal); }
.gt-hist-dot.warn { background: var(--gt-gold); }
.gt-hist-dot.bad { background: var(--gt-coral); }
.gt-hist-dot.accent { background: var(--gt-mint); box-shadow: 0 0 0 3px rgba(95, 196, 178, .25); }
.gt-hist-day { grid-area: day; font-weight: 800; font-size: .9rem; }
.gt-hist-time { grid-area: time; font-size: .78rem; color: var(--gt-muted); font-weight: 600; }
.gt-hist-xp { grid-area: xp; font-weight: 800; font-size: .85rem; color: var(--gt-gold-dark); min-width: 34px; text-align: right; }
.gt-pill { grid-area: pill; font-size: .7rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--gt-track); color: var(--gt-muted); white-space: nowrap; }
.gt-pill.ok { background: var(--gt-teal-soft); color: var(--gt-teal); }
.gt-pill.warn { background: #FBE7C6; color: #8A4B08; }
.gt-pill.bad { background: var(--gt-coral-soft); color: var(--gt-coral-dark); }
.gt-pill.accent { background: var(--gt-gold); color: var(--gt-gold-ink); }

/* Coming soon */
.gt-soon { justify-items: start; padding: 22px 20px; gap: 10px; }
.gt-soon-art { position: relative; width: 100%; height: 110px; border-radius: 20px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 100%, rgba(242, 178, 51, .28), transparent 70%), linear-gradient(180deg, #FFF6E4, #FDEBC9); }
.gt-soon-art i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.gt-soon-art i:nth-child(2) { width: 14px; height: 14px; left: 22%; top: 24%; }
.gt-soon-art i:nth-child(3) { width: 9px; height: 9px; right: 24%; top: 30%; background: var(--gt-mint); }
.gt-soon-art i:nth-child(4) { width: 11px; height: 11px; right: 30%; bottom: 20%; background: var(--gt-coral); opacity: .6; }
.gt-soon-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; transform: rotate(-6deg);
  background: linear-gradient(180deg, var(--gt-gold-2), var(--gt-gold)); color: var(--gt-gold-ink); box-shadow: 0 5px 0 var(--gt-gold-dark), 0 14px 22px -10px rgba(185, 132, 26, .8); }
.gt-soon-ic .ic { width: 30px; height: 30px; }
.gt-soon-tag { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gt-teal-2); background: var(--gt-teal-soft); padding: 4px 10px; border-radius: 999px; margin-top: 4px; }
.gt-soon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--gt-ink); font-weight: 600; font-size: .92rem; }
.gt-soon li { display: flex; gap: 10px; align-items: flex-start; }
.gt-soon-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gt-teal-soft); color: var(--gt-teal); flex-shrink: 0; }
.gt-soon-check .ic { width: 13px; height: 13px; }
.gt-safe { display: flex; align-items: center; gap: 12px; background: linear-gradient(145deg, #E8F4F1, var(--gt-teal-soft)); color: #0B3B36; border-radius: 20px; padding: 13px 14px; font-weight: 700; font-size: .88rem; border: 1px solid #CFE5DF; }
.gt-safe .ic { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: var(--gt-teal); color: #fff; }

/* Full-screen camera */
.gt-cam {
  position: fixed; inset: 0; z-index: 50; background: #101413; color: #fff;
  display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0 0;
  font-family: var(--font-body);
}
.gt-cam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.gt-round { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.gt-round.dark { background: rgba(255,255,255,.12); color: #fff; }
.gt-cam-frame { flex: 1; min-height: 0; padding: 14px 16px; display: flex; }
.gt-cam-frame .cam { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 10px; min-height: 0; }
.gt-cam-frame .cam-frame { border-radius: 28px; aspect-ratio: auto; height: 100%; min-height: 0; border: 3px solid #2C3532; background: #1D2422; }
.gt-cam-frame .cam-guide { inset: 12% 16%; border: 5px solid var(--gt-gold, #F2B233); border-radius: 50%; }
.gt-cam-frame .cam-status {
  justify-self: center; background: #fff; color: #1B1F1D; font-weight: 800; padding: 9px 16px;
  border-radius: 20px; box-shadow: 0 4px 0 #C9C2B4;
}
.gt-cam-frame.stopped .cam-status { display: none; }
.gt-cam-sheet {
  background: #FFF8EC; color: #1B1F1D; border-radius: 30px 30px 0 0;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px;
}
.gt-cam-sheet h2 { font-size: 1.15rem; }
.gt-cam-sheet .gt-muted { font-size: .8rem; }
.gt-cam-sheet .gt-btn.ghost { color: #1B1F1D; }
.gt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gt-step { background: #fff; border: 2px solid #EDE3D2; border-radius: 18px; padding: 12px 6px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.gt-step strong { font-size: .8rem; font-weight: 800; }
.gt-step-sub { font-size: .72rem; color: #5B625E; font-weight: 600; min-height: 1em; }
.gt-step-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #F1E9DB; color: #6B726E; }
.gt-step-ic .ic { width: 18px; height: 18px; }
.gt-step.busy { border-style: dashed; border-color: #E8704F; }
.gt-step.busy .gt-step-ic { background: #FDE3D9; color: #A3432F; animation: gt-pulse 1.1s ease-in-out infinite; }
.gt-step.ok .gt-step-ic { background: #0F5E57; color: #fff; }
.gt-step.bad .gt-step-ic { background: #A3432F; color: #fff; }
.gt-fail { display: grid; justify-items: center; gap: 6px; text-align: center; }
.gt-fail-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #FDE3D9; color: #A3432F; }
.gt-fail-ic .ic { width: 28px; height: 28px; }
.gt-fail p { color: #5B625E; font-weight: 600; }

/* Reward screen */
.gt-reward {
  position: fixed; inset: 0; z-index: 60; overflow: auto; color: #fff;
  background: radial-gradient(90% 55% at 50% 22%, #1B8A7C, #0F5E57 55%, #093B36);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body); animation: gt-fade .25s ease-out;
}
.gt-reward > * { width: 100%; max-width: 440px; position: relative; }
.gt-reward-xp { font-family: var(--font-display); font-size: clamp(3.6rem, 18vw, 5rem); font-weight: 800; line-height: 1; color: #F2B233; animation: gt-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.gt-reward-line { font-weight: 700; color: #E3F0ED; font-size: 1.05rem; margin-bottom: 8px; }
.gt-reward-card {
  display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; color: #1B1F1D;
  border-radius: 22px; padding: 14px 16px; box-shadow: 0 6px 0 #093B36; animation: gt-rise .4s .15s ease-out both;
}
.gt-reward-card > div { display: grid; gap: 2px; }
.gt-reward-card strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.gt-reward-card > div > span:not(.gt-eyebrow) { font-size: .85rem; color: #5B625E; font-weight: 600; }
.gt-reward-card .gt-eyebrow { color: inherit; font-size: .7rem; }
.gt-reward-card.gold { background: #F2B233; color: #3D2A00; box-shadow: 0 6px 0 #B9841A; }
.gt-reward-card.gold > div > span:not(.gt-eyebrow) { color: #3D2A00; }
.gt-reward-ic { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; background: #fff; color: #B9841A; border: 3px solid #3D2A00; }
.gt-reward-ic .ic { width: 28px; height: 28px; }
.gt-reward-ic.coral { background: #FDE3D9; color: #E8704F; border: 0; }
.gt-reward-bar { margin-top: 6px; }
.gt-reward .gt-btn { margin-top: auto; }
.gt-rays { position: absolute !important; left: 50% !important; top: 150px; width: 640px !important; max-width: none !important; height: 640px; margin-left: -320px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(rgba(255, 211, 107, .16) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%);
  transform: translateY(-50%); animation: gt-spin 40s linear infinite; }
.gt-reward-xp { text-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 0 40px rgba(255, 211, 107, .55); }
.gt-confetti { position: absolute !important; inset: 0 0 auto; height: 50%; max-width: none !important; pointer-events: none; overflow: hidden; }
.gt-confetti span { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: gt-fall 2.4s ease-in forwards; }

@keyframes gt-pulse { 50% { transform: scale(1.12); } }
@keyframes gt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes gt-flicker { 50% { transform: scale(1.15) rotate(-5deg); } }
@keyframes gt-breathe { 50% { box-shadow: 0 5px 0 var(--gt-gold-dark), 0 0 0 10px rgba(242, 178, 51, .12), 0 16px 26px -10px rgba(185, 132, 26, .8); } }
@keyframes gt-spin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes gt-fade { from { opacity: 0; } }
@keyframes gt-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes gt-rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes gt-fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gt-reward, .gt-reward-xp, .gt-reward-card, .gt-confetti span, .gt-step.busy .gt-step-ic, .gt-page, .gt-rays, .gt-tab-clock, .gt-streak.hot .ic { animation: none; }
  .gt-confetti { display: none; }
}