/* LoosenUp 2.2 screens: sleep, journal, support a friend, seasonal packs, Trace the square, comfort settings. */
.sleep-list, .pack-list, .journal-list { display: grid; gap: 12px; }
.sleep-card {
  display: grid; gap: 4px; width: 100%; padding: 18px; text-align: left; font: inherit; color: #EEF2FA; cursor: pointer;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow);
  background: linear-gradient(160deg, #24305A 0%, #3B3463 100%);
}
.sleep-card strong { font-family: var(--display); font-size: 20px; font-weight: 650; }
.sleep-kind { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #FFD98A; }
.sleep-desc { font-size: 14px; color: #C9D2E6; }
.sleep-player { display: grid; gap: 10px; text-align: center; background: linear-gradient(180deg, #1B2546, #2C2A52); color: #EEF2FA; border-color: rgba(255, 255, 255, .1); }
.sleep-player .eyebrow { color: #FFD98A; }
.sleep-player .fine, .sleep-player .field-label { color: #C9D2E6; }
.sp-line { font: 600 21px/1.45 var(--display); min-height: 4.4em; margin: 6px 0; }
.sp-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: #FFD98A; transition: width 1s linear; }
.sleep-player .btn-soft, .sleep-player .chip { background: rgba(255, 255, 255, .1); color: #EEF2FA; border-color: rgba(255, 255, 255, .2); }
.sleep-player .chip[aria-pressed="true"] { background: #FFD98A; color: #2B1E05; }
.sleep-player .btn-ghost { color: #EEF2FA; }
html.sleep-dim body { background: #0B1020; }
html.sleep-dim .sky, html.sleep-dim .topbar { opacity: .35; }

.length-row { display: grid; gap: 6px; }
.goal-line { font: 700 18px/1.3 var(--display); margin: 0; }
.goal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.gday { display: grid; place-items: center; height: 38px; border-radius: 12px; font-size: 12px; font-weight: 800; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); }
.gday.on { background: var(--leaf-2); color: #fff; border-color: transparent; }
.reflect-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

.journal-prompt { font: 600 19px/1.35 var(--display); margin: 0; }
.journal-entry { padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); display: grid; gap: 6px; }
.journal-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.friend-step h2 { margin-top: 0; }
.friend-actions { display: grid; gap: 10px; }

.pack-card.now { border: 2px solid var(--sun-2); }
.pack-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pack-ic { font-size: 28px; line-height: 1; }
.pack-item { text-align: left; justify-content: flex-start; }
.season-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.season-text { display: grid; gap: 2px; }
.season-text strong { font-size: 16px; }
.season-text span { font-size: 13px; color: var(--ink-2); }

.trace-wrap { display: grid; place-items: center; }
.trace-svg { width: min(300px, 82vw); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.trace-path { fill: none; stroke: rgba(79, 166, 124, .45); stroke-width: 6; stroke-dasharray: 2 10; stroke-linecap: round; }
.trace-dot { fill: var(--sun); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 4px 10px rgba(242, 167, 43, .8)); }
.trace-finger { fill: rgba(79, 166, 124, .35); stroke: var(--leaf-2); stroke-width: 2; }
.gt-trace { background: linear-gradient(160deg, #DDF3E8, #FFFFFF 75%); }
.gt-pop { background: linear-gradient(160deg, #DCEFFF, #FFFFFF 75%); }
html[data-theme="dark"] .gt-pop { background: linear-gradient(160deg, #1E3A55, #1A2436 75%); }
.game-tile[hidden] { display: none; }
/* The date sits on the hero sky, which changes colour through the day: a deeper green keeps it readable on the light day skies.
   The night sky is dark navy, so there the date keeps the warm gold eyebrow colour instead. */
html:not([data-theme="dark"]) .sky-card:not([data-time="Quiet nights"]) #today-date { color: #1D5A3F; }
/* For you: a caring first line, then a short plan of steps. */
.for-you-hear { font-size: 16px; line-height: 1.35; font-weight: 800; color: var(--ink); margin: 2px 0 8px; }
/* The plan chips already name the current step, so its heading is for screen readers only. */
.for-you-plan:not([hidden]) + #for-you-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.for-you #for-you-why { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
.for-you-plan { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: fy; }
.for-you-plan li { counter-increment: fy; font-size: 12px; font-weight: 800; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(39, 110, 79, .08); color: var(--ink-2); }
.for-you-plan li::before { content: counter(fy) ". "; }
.for-you-plan li.now { background: var(--leaf-2, #276E4F); color: #fff; }
.for-you-plan li.done { text-decoration: line-through; opacity: .7; }
.for-you-plan li.done::before { content: "\2713  "; }
.for-you-actions { gap: 8px; flex-wrap: wrap; }
html[data-theme="dark"] .for-you-plan li { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .for-you-plan li.now { background: #4FA67C; color: #10231A; }

/* Larger text: scales the whole interface so layouts stay intact. */
html.text-large .app, html.text-large .tabbar, html.text-large .sheet { zoom: 1.1; }
html.text-larger .app, html.text-larger .tabbar, html.text-larger .sheet { zoom: 1.2; }

/* Hindi: no uppercase or wide letter-spacing, which pull Devanagari apart. */
html[lang="hi"] .eyebrow, html[lang="hi"] .tag, html[lang="hi"] .panel-head, html[lang="hi"] .stat-k { letter-spacing: 0; text-transform: none; }

html[data-theme="dark"] .gday { color: #C9D4DE; }
html[data-theme="dark"] .gt-trace { background: linear-gradient(160deg, #1F3D2E, #1A2436 75%); }
html[data-theme="dark"] .trace-path { stroke: rgba(158, 224, 190, .5); }
@media (prefers-reduced-motion: reduce) { .sp-bar i { transition: none; } }

/* For you right now: one suggestion with a one-tap Start. */
.for-you { display: grid; gap: 6px; background: linear-gradient(150deg, #FFF4DA, #FFFFFF 70%); box-shadow: inset 0 0 0 2px rgba(255, 200, 87, .55); }
.for-you .subtitle { margin: 0; }
.for-you .muted { margin: 0 0 6px; }
.for-you .btn { justify-self: start; min-width: 120px; }
.more-help .fold { padding: 4px 4px 0; }
.more-help .fold > summary { padding-inline: 4px; }
.prep-list { margin: 0 0 6px; }
.match-chips { margin-bottom: 4px; }
html[data-theme="dark"] .for-you { background: linear-gradient(150deg, #3A3220, #1A2436 70%); box-shadow: inset 0 0 0 2px rgba(255, 200, 87, .4); }

/* Sleep, journal and more tiles on Today. */
.tool-more .tool-ic { background: #E6F5EC; color: var(--leaf-2); }
.more-row .season-card { margin-bottom: 4px; }
html[data-theme="dark"] .gday.on { color: #fff; }
html[data-theme="dark"] .tool-more .tool-ic { background: #CFEBDD; color: #1E5A40; }

.trace-icon { width: 34px; height: 34px; display: block; margin-inline: auto; }
.game-art .trace-icon { width: 52px; height: 52px; }
#screen-today .season-card { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; padding: 12px 16px; }
#screen-today .season-card .pack-ic { font-size: 26px; }
#screen-today .season-text strong { font-size: 16px; }

/* Emotion names never break mid-word ("Overwhelmed" shrinks a little instead). */
.emo-name { overflow-wrap: normal; word-break: normal; font-size: min(12px, 3.1vw); letter-spacing: -.1px; }

/* LoosenUp Plus */
.plus-tag { background: #FFF1C9; color: #6B4A00; }
.plus-key { font: 700 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; padding: 10px 12px; border-radius: 12px; background: rgba(39, 110, 79, .08); color: var(--ink); }
#plus-restore > summary { font-weight: 800; }
html[data-theme="dark"] .plus-tag { background: #4A3B12; color: #FFE6A3; }

/* ---------- Games 2.6: a swipeable row on Today, a tile grid in Calm, five new games ---------- */
.link-btn { border: 0; background: none; padding: 6px 4px; min-height: 48px; min-width: 48px; font: 800 14px/1 var(--ui); color: var(--leaf-2); cursor: pointer; }
html[data-theme="dark"] .link-btn { color: #A8E6C4; }
#screen-today .game-row {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#screen-today .game-row::-webkit-scrollbar { display: none; }
#screen-today .game-tile { flex: 0 0 calc((100% - 30px) / 3.3); scroll-snap-align: start; }
.gt-ic svg { width: 34px; height: 34px; display: block; margin-inline: auto; }
.game-art > svg { width: 52px; height: 52px; }
.gt-sort { background: linear-gradient(160deg, #E2F3E8, #FFFFFF 75%); }
.gt-sand { background: linear-gradient(160deg, #F7E9CC, #FFFFFF 75%); }
.gt-stars { background: linear-gradient(160deg, #DCE0F5, #FFFFFF 75%); }
.gt-stack { background: linear-gradient(160deg, #FFE7D6, #FFFFFF 75%); }
.gt-kind { background: linear-gradient(160deg, #FFE3EA, #FFFFFF 75%); }
html[data-theme="dark"] .gt-sort { background: linear-gradient(160deg, #1F3D2E, #1A2436 75%); }
html[data-theme="dark"] .gt-sand { background: linear-gradient(160deg, #4A3F26, #1A2436 75%); }
html[data-theme="dark"] .gt-stars { background: linear-gradient(160deg, #2B3A67, #1A2436 75%); }
html[data-theme="dark"] .gt-stack { background: linear-gradient(160deg, #4A3026, #1A2436 75%); }
html[data-theme="dark"] .gt-kind { background: linear-gradient(160deg, #4A2634, #1A2436 75%); }

/* Calm, Games: big tiles, two to a row, with a two-word hint. */
.calm-studio .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calm-studio .game-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; min-height: 0; padding: 16px 10px 14px; }
.calm-studio .game-card strong { font-size: 18px; }
.calm-studio .game-card span span { font-size: 13.5px; font-weight: 700; }
.calm-studio .game-card:active { transform: scale(.97); }

/* Game screen: a one-line hint, a progress bar and a small celebration at the end. */
.game-hint { margin: 2px 0 10px; color: var(--ink-2); font-weight: 700; font-size: 15px; }
.game-bar { height: 8px; border-radius: 999px; background: rgba(34, 48, 56, .08); overflow: hidden; margin: 6px 0 4px; }
.game-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sun), var(--leaf)); transition: width .35s ease; }
html[data-theme="dark"] .game-bar { background: rgba(255, 255, 255, .12); }
.game-done { position: relative; overflow: hidden; }
.game-done:not([hidden]) { animation: done-in .45s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes done-in { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.game-done-row { gap: 10px; flex-wrap: wrap; }
.game-done-row .btn { flex: 1 1 140px; }
.game-burst { position: absolute; left: 50%; top: 28px; width: 0; height: 0; pointer-events: none; }
.game-burst i { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0; }
.game-done:not([hidden]) .game-burst i { animation: burst 1.1s ease-out .1s forwards; }
.game-burst i:nth-child(1) { background: #FFC857; --bx: -90px; --by: -10px; }
.game-burst i:nth-child(2) { background: #8CC8F0; --bx: 90px; --by: -6px; }
.game-burst i:nth-child(3) { background: #F28FA0; --bx: -60px; --by: 40px; }
.game-burst i:nth-child(4) { background: #4FA67C; --bx: 64px; --by: 44px; }
.game-burst i:nth-child(5) { background: #B9A3F0; --bx: -120px; --by: 20px; }
.game-burst i:nth-child(6) { background: #FFB088; --bx: 120px; --by: 24px; }
.game-burst i:nth-child(7) { background: #FFC857; --bx: -30px; --by: 60px; }
.game-burst i:nth-child(8) { background: #8CC8F0; --bx: 34px; --by: 64px; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1); } }

/* Colour Sort */
.sort-stage { display: grid; gap: 16px; }
.sort-tray {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 18px 14px; border-radius: 28px;
  background: linear-gradient(180deg, #F3E9DA, #FFF6E3); box-shadow: var(--shadow); touch-action: none;
}
.stone {
  aspect-ratio: 1; min-height: 44px; border: 0; padding: 0; cursor: grab; border-radius: 46% 54% 50% 50% / 55% 48% 52% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 12%, transparent 30%), var(--sc);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .16), 0 4px 8px rgba(34, 48, 56, .18);
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)); transition: transform .2s ease, opacity .3s ease, box-shadow .2s ease;
  position: relative; z-index: 1;
}
.stone[aria-pressed="true"] { transform: translateY(-8px) scale(1.15); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sc), 0 10px 18px rgba(34, 48, 56, .25); }
.stone.dragging { transition: none; z-index: 5; cursor: grabbing; }
.stone.placed { opacity: 0; transform: scale(.3); pointer-events: none; }
.sort-bowls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sort-bowl {
  display: grid; justify-items: center; align-content: end; gap: 6px; min-height: 104px; padding: 10px 6px 12px; border: 0; cursor: pointer;
  border-radius: 18px 18px 46px 46px; color: #223038; font: 800 14px/1 var(--ui);
  background: #FFFFFF; box-shadow: inset 0 -10px 0 var(--sc), var(--shadow);
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--sc) 45%, #fff));
  box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--sc) 70%, #fff), var(--shadow); transition: transform .2s ease;
}
.sort-bowl.ready { transform: translateY(-3px); box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--sc) 70%, #fff), 0 0 0 3px var(--sc); }
.sort-bowl.nudge { animation: nudge .4s ease; }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bowl-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 30px; max-width: 70px; }
.bowl-pile i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18); animation: done-in .3s ease; }
html[data-theme="dark"] .sort-tray { background: linear-gradient(180deg, #2E2A24, #1F2633); }

/* Zen Sand */
.sand-stage { display: grid; gap: 12px; }
.sand-canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: 28px; touch-action: none; cursor: crosshair; background: #F1DDB5; box-shadow: inset 0 0 0 6px #D9BE8C, var(--shadow); }
.sand-tools { justify-content: center; }

/* Star Connect */
.stars-sky {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 60vh; margin-inline: auto; border-radius: 28px; overflow: hidden;
  background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 70%, #fff, transparent), radial-gradient(circle at 50% 120%, #4B4F8F, #1B2347 70%);
  box-shadow: var(--shadow);
}
.stars-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.star-line { stroke: #FFE9A8; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 233, 168, .8)); animation: line-in .5s ease-out; }
@keyframes line-in { from { opacity: 0; } }
.star {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #FFFFFF 0 14%, rgba(255, 233, 168, .55) 15% 30%, transparent 31%);
}
.star.lit { background: radial-gradient(circle, #FFFFFF 0 18%, #FFE9A8 19% 30%, rgba(255, 200, 87, .35) 31% 50%, transparent 51%); }
.star.next { animation: twinkle 1.4s ease-in-out infinite; background: radial-gradient(circle, #FFFFFF 0 20%, #FFC857 21% 34%, rgba(255, 200, 87, .4) 35% 60%, transparent 61%); }
.star.hint { animation: twinkle .35s ease-in-out 3; }
@keyframes twinkle { 50% { transform: scale(1.35); } }
.stars-name { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: #FFE9A8; font: 650 24px/1.2 var(--display); opacity: 0; transition: opacity .6s ease; }
.stars-sky.complete .stars-name { opacity: 1; }

/* Gentle Stack */
.stack-field {
  position: relative; height: min(52vh, 420px); border-radius: 28px; overflow: hidden; touch-action: manipulation; cursor: pointer;
  background: linear-gradient(180deg, #EAF4FF 0%, #FFF6E3 100%); box-shadow: var(--shadow);
}
.stack-tower { position: absolute; left: 0; right: 0; bottom: 14px; top: 0; transition: transform .5s ease; }
.stack-block { position: absolute; height: 26px; border-radius: 8px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 3px 6px rgba(34, 48, 56, .15); transition: left .25s ease, width .25s ease, transform .25s ease; }
.stack-block.moving { transition: none; transform: translateY(-12px); opacity: .92; }
.stack-block.just { box-shadow: 0 0 0 3px #fff, 0 0 16px 4px rgba(255, 200, 87, .9); }
.stack-drop { width: 100%; margin-top: 12px; }
html[data-theme="dark"] .stack-field { background: linear-gradient(180deg, #1E2A44 0%, #1A2436 100%); }

/* Kind Notes */
.kind-note {
  padding: 16px 18px; border-radius: 22px; background: #FFF9EC; color: #3A2E1C; margin-bottom: 14px; text-align: left; font: 700 16px/1.4 var(--ui);
  box-shadow: inset 0 0 0 2px rgba(242, 167, 43, .4), var(--shadow); transform: rotate(-1deg);
}
.kind-note-head { margin: 0 0 8px; font: 650 20px/1.2 var(--display); }
.kind-lines { margin: 0; padding-left: 22px; display: grid; gap: 6px; font: inherit; }
.kind-line { min-height: 24px; padding-bottom: 2px; border-bottom: 1.5px dashed rgba(201, 160, 106, .7); font: inherit; text-align: left; }
.kind-line.filled { border-bottom-style: solid; animation: done-in .35s ease; }
.kind-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
.kind-word.kept { display: none; }
.kind-word {
  border: 0; cursor: pointer; padding: 10px 14px; min-height: var(--tap); border-radius: 999px; font: 700 14.5px/1.25 var(--ui); color: #3A2E1C;
  background: linear-gradient(160deg, #FFE3EA, #FFF6E3); box-shadow: var(--shadow); animation: drift 6s ease-in-out infinite;
}
.kind-word:nth-child(even) { background: linear-gradient(160deg, #E2F3E8, #FFF6E3); }
.kind-word:nth-child(3n) { background: linear-gradient(160deg, #DDEFFF, #FFF6E3); }
@keyframes drift { 50% { transform: translateY(-5px); } }
#kind-other { display: block; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .kind-word, .star.next, .star.hint, .game-done:not([hidden]), .game-done:not([hidden]) .game-burst i, .sort-bowl.nudge { animation: none; }
  .stack-tower { transition: none; }
}

/* Review 2.6.1: long names fit their tiles. */
.emo { padding-inline: 2px; }
.emo[data-emotion="overwhelmed"] .emo-name { font-size: min(11.5px, 2.8vw); letter-spacing: -.5px; }
@media (max-width: 400px) { .emotions { gap: 6px; } }
.spaces.carousel .space-card strong { font-size: 18px; }
#screen-support .fine a, #screen-sos .fine a { color: var(--leaf-2); font-weight: 800; }
html[data-theme="dark"] #screen-support .fine a, html[data-theme="dark"] #screen-sos .fine a { color: #A8E6C4; }
.jar { white-space: nowrap; }
.timer-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.timer-chips .chip { padding-inline: 4px; justify-content: center; text-align: center; }
/* The celebration dots stay behind the words. */
.game-done > :not(.game-burst) { position: relative; z-index: 1; }

/* 2.7: first-run focus, Send to a friend, and a gentle glow when a link opens the mood check-in. */
.focus-pick { display: grid; gap: 8px; margin: 4px 0 2px; }
.focus-chips { justify-content: center; }
#screen-gift .focus-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#screen-gift .focus-chip { justify-content: center; padding-inline: 6px; font-size: 14.5px; }
#screen-gift .how-steps { gap: 8px; }
#screen-gift .how-steps li { padding-block: 10px; }
.focus-chip span { font-size: 16px; }
.send-btn { display: block; margin: 6px auto 0; }
#screen-result .send-btn { margin-top: 2px; }
.glow { animation: glow 1.6s ease-out 1; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 87, .9); } 100% { box-shadow: 0 0 0 18px rgba(255, 200, 87, 0); } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } }