.activity { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 18px; }
.rings { width: 168px; height: 168px; position: relative; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--ring-value), var(--border) 0); display: grid; place-items: center; transform: rotate(-90deg); }
.ring::after { content: ""; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; background: var(--bg); }
.ring--outer { width: 154px; height: 154px; --ring-color: var(--accent-light); }
.ring--mid { width: 120px; height: 120px; --ring-color: var(--accent); }
.ring--inner { width: 86px; height: 86px; --ring-color: var(--accent-deep); }
.ring-legend { display: flex; flex-direction: column; gap: 12px; }
.ring-legend__item { font-size: 12.5px; }
.ring-legend__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.ring-legend__status { color: var(--text-45); font-size: 11px; margin-top: 2px; }
.urgency-drops { display: flex; gap: 2px; color: var(--accent-light); }
.timer-stage { flex: 1; min-height: 330px; display: grid; place-items: center; position: relative; }
.timer-stage::before, .timer-stage::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(145,132,217,.13), transparent 68%); }
.timer-stage::before { left: -110px; top: 0; }
.timer-stage::after { right: -120px; bottom: -20px; }
.timer-ring { width: 250px; height: 250px; border-radius: 50%; background: conic-gradient(var(--accent) var(--timer-progress), var(--border) 0); display: grid; place-items: center; position: relative; z-index: 1; transform: rotate(-90deg); }
.timer-ring::before { content: ""; width: 228px; height: 228px; border-radius: 50%; background: var(--bg); position: absolute; }
.timer-core { width: 166px; height: 166px; border-radius: 50%; background: var(--accent-08); display: grid; place-items: center; text-align: center; transform: rotate(90deg); animation: breathe 4s ease-in-out infinite; position: relative; z-index: 2; }
.timer-value { font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
.timer-meta { color: var(--text-60); font-size: 12px; margin-top: 6px; }
@keyframes breathe { 50% { scale: 1.04; } }
.celebrate { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-20); box-shadow: var(--shadow-glow); margin: 16px auto 2px; }
.night-hero { margin: calc(-1 * (env(safe-area-inset-top, 0px) + 18px)) calc(-1 * var(--pad)) 0; padding: calc(env(safe-area-inset-top, 0px) + 72px) var(--pad) 24px; border-radius: 0 0 22px 22px; }
.ladder { display: flex; flex-direction: column; gap: 10px; }
.level { display: flex; align-items: flex-start; gap: 12px; }
.level__number { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-12); color: var(--accent-light); font-weight: 700; flex: none; }
.level--active .level__number { background: var(--accent); color: var(--bg); }
.level--locked { opacity: .72; }
.daily-ring { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--accent) var(--ring-value), var(--border) 0); display: grid; place-items: center; }
.daily-ring::before { content: ""; width: 100px; height: 100px; border-radius: 50%; background: var(--surface); position: absolute; }
.daily-ring__text { position: relative; text-align: center; font-weight: 650; }
.night-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.night-day { display: grid; justify-items: center; gap: 6px; color: var(--text-45); font-size: 10px; }
.night-dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--text-30); }
.night-dot--dry { background: var(--accent-light); border: 0; }
.night-dot--damp { background: linear-gradient(90deg, var(--accent-light) 50%, rgba(233,233,237,.15) 50%); border: 0; }
.night-dot--wet { border-style: solid; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 12px 0; }
.pin-dot { width: 13px; height: 13px; border: 1.5px solid var(--text-30); border-radius: 50%; }
.pin-dot--filled { background: var(--accent); border-color: var(--accent); }
.pinpad { display: grid; grid-template-columns: repeat(3, 64px); justify-content: center; gap: 12px 20px; }
.pin-key { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--surface); color: var(--text); font-size: 22px; cursor: pointer; }
.pin-key--action { color: var(--accent-light); font-size: 12px; }
.onboarding-progress { display: flex; gap: 6px; }
.onboarding-progress span { height: 4px; flex: 1; border-radius: 99px; background: var(--border-strong); }
.onboarding-progress span.active { background: var(--accent); }
.safety-list { padding-left: 20px; color: var(--text-60); font-size: 13px; line-height: 1.55; }
.article { font-size: 14px; line-height: 1.65; color: var(--text-80); }
.article h2 { color: var(--text); font-size: 18px; margin: 18px 0 6px; }
.quiz-option { margin-top: 8px; }
.update-banner { position: fixed; z-index: 80; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%); width: min(390px, calc(100% - 28px)); background: #303343; border: 1px solid var(--accent-border); border-radius: 12px; padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }

/* Duggdalen and drink logging */
.home-extras { display: grid; gap: 10px; }
.quick-drink, .companion-card { width: 100%; color: var(--text); text-align: left; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; cursor: pointer; }
.quick-drink__icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-light); background: var(--accent-12); }
.companion-card { min-height: 78px; background: linear-gradient(135deg, rgba(93,116,94,.2), var(--surface)); }
.companion-card > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.companion-card .progress { width: 100%; }
.companion-card--teaser { background: linear-gradient(135deg, rgba(145,132,217,.17), var(--surface)); }
.mini-companion { width: 62px; height: 62px; display: grid; place-items: center; flex: none; }
.mini-companion .creature-art { width: 72px; height: 72px; }
.world-screen { background: radial-gradient(circle at 50% 15%, rgba(93,116,94,.24), transparent 31%), var(--bg); }
.world-welcome { text-align: center; display: grid; gap: 11px; }
.world-welcome h2, .world-welcome p, .discovery h2, .discovery p { margin: 0; }
.creature-stage { min-height: 150px; display: grid; place-items: center; }
.creature-stage--large { min-height: 280px; }
.creature-stage .creature-art { width: 170px; height: 170px; }
.creature-stage--large .creature-art { width: 270px; height: 270px; }
.creature-art { display: block; overflow: visible; filter: drop-shadow(0 12px 12px rgba(0,0,0,.24)); }
.creature-primary { fill: var(--creature-primary); stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.creature-secondary { fill: var(--creature-secondary); stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.creature-detail { fill: none; stroke: var(--creature-secondary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.creature-shadow { fill: rgba(8,10,18,.3); }
.creature-face { fill: #292638; stroke: #292638; stroke-width: 2.5; stroke-linecap: round; fill-opacity: .9; }
.creature-face path { fill: none; }
.creature-spark, .friend-glow circle { fill: var(--accent-light); stroke: none; }
.creature-glow { opacity: .36; }
.creature-art--locked { filter: grayscale(1); opacity: .22; }
.creature-art--locked .creature-face { opacity: 0; }
.creature-art--glow { filter: drop-shadow(0 0 15px rgba(207,197,255,.55)); animation: friend-float 4s ease-in-out infinite; }
.friend-glow { fill: var(--accent-light); stroke: var(--accent-light); opacity: .9; }
@keyframes friend-float { 50% { transform: translateY(-3px); } }
.world-status { position: sticky; top: 8px; z-index: 4; background: rgba(35,37,50,.94); backdrop-filter: blur(12px); }
.world-energy { display: block; font-size: 29px; margin-top: 4px; }
.world-map { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 5px 0 15px; }
.world-map::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 32px; width: 2px; background: linear-gradient(var(--accent), rgba(145,132,217,.1)); }
.world-node { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; position: relative; }
.world-node__marker { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); display: grid; place-items: center; color: var(--accent-light); z-index: 1; }
.world-node--locked { opacity: .58; }
.world-node--locked .world-node__marker { border-color: var(--border-strong); color: var(--text-45); }
.world-node__card { padding: 12px 14px; }
.world-node__card > strong { display: block; margin-top: 5px; }
.world-node__creature { margin-top: 7px; display: flex; align-items: center; gap: 8px; color: var(--text-60); font-size: 12px; }
.world-node__creature .creature-art { width: 54px; height: 54px; }
.discovery { text-align: center; display: grid; gap: 9px; animation: discovery-in .35s ease both; }
@keyframes discovery-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.creature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.creature-card { color: var(--text); min-width: 0; display: grid; justify-items: center; gap: 4px; cursor: pointer; text-align: center; }
.creature-card:disabled { cursor: default; }
.creature-card .creature-art { width: 112px; max-width: 100%; }
.creature-card .badge { margin-top: 4px; letter-spacing: 0; }
.creature-detail { background: radial-gradient(circle at 50% 28%, rgba(145,132,217,.2), transparent 32%), var(--bg); }
.drink-choices { margin-top: 9px; }
.drink-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.drink-type-grid .option { min-height: 74px; flex-direction: column; justify-content: center; text-align: center; }
.drink-type-grid .option__icon { height: 25px; }
.drink-timeline { margin-top: 10px; }
.drink-time { width: 42px; color: var(--text-45); font-variant-numeric: tabular-nums; }
.drink-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.drink-periods span { background: var(--accent-08); border-radius: 9px; padding: 9px; display: grid; gap: 3px; color: var(--text-60); font-size: 11px; text-align: center; }
.drink-periods strong { color: var(--text); font-size: 17px; }
.settings-row--column { align-items: flex-start; flex-direction: column; }
.settings-button { width: 100%; color: var(--text); background: none; border-right: 0; border-bottom: 0; border-left: 0; cursor: pointer; justify-content: space-between; }
.parent-day { font-size: 12px; }
.parent-day > :first-child { width: 28px; color: var(--text-45); }
.parent-day .night-dot { width: 9px; height: 9px; flex: none; }
.parent-day > :nth-child(3) { flex: 1; min-width: 0; }
@media (max-width: 355px) {
  :root { --pad: 16px; }
  .activity { grid-template-columns: 136px 1fr; gap: 12px; }
  .rings { width: 136px; height: 136px; transform: scale(.82); transform-origin: center; }
  .chip-row { grid-auto-flow: row; grid-template-columns: 1fr; }
  .parent-nav { grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); }
  .creature-card .creature-art { width: 96px; }
}
@media (min-width: 600px) {
  body { background: radial-gradient(circle at 50% 30%, #25283b, var(--bg-deep) 65%); }
  .screen { box-shadow: 0 0 0 1px var(--border), 0 30px 80px rgba(0,0,0,.35); }
}