/*
 * OurLife Playful Illustration layer
 * Thick ink lines, joyful collage colors and tactile controls without remote assets.
 */

:root {
    --playful-ink: #282237;
    --playful-outline: #282237;
    --playful-shadow-color: #282237;
    --playful-cream: #fff9df;
    --playful-paper: #fffdf4;
    --playful-purple: #8566ed;
    --playful-purple-soft: #d8ceff;
    --playful-coral: #ff826b;
    --playful-yellow: #ffd95a;
    --playful-green: #a8e86c;
    --playful-muted: #665e70;
    --playful-line: 2px solid var(--playful-outline);
    --playful-shadow-sm: 3px 3px 0 var(--playful-shadow-color);
    --playful-shadow: 5px 5px 0 var(--playful-shadow-color);
    --playful-shadow-lg: 8px 8px 0 var(--playful-shadow-color);

    --primary-color: #7357e6;
    --secondary-color: #d8ceff;
    --accent-color: #ffd95a;
    --success-color: #5f9f37;
    --danger-color: #d84b3c;
    --info-color: #7357e6;
    --warning-color: #d28a15;
    --bg-primary: var(--playful-cream);
    --bg-secondary: #f5edcc;
    --bg-tertiary: var(--playful-purple-soft);
    --bg-card: var(--playful-paper);
    --card-bg: var(--playful-paper);
    --card-border: var(--playful-outline);
    --border-light: var(--playful-outline);
    --border-medium: var(--playful-outline);
    --border-dark: var(--playful-outline);
    --border-color: var(--playful-outline);
    --text-primary: var(--playful-ink);
    --text-secondary: var(--playful-muted);
    --text-muted: #756d7c;
    --content-strong: var(--playful-ink);
    --content-muted: var(--playful-muted);
    --surface-canvas: var(--playful-cream);
    --surface-raised: var(--playful-paper);
    --surface-elevated: var(--playful-paper);
    --surface-subtle: #f5edcc;
    --surface-muted: #eee6c8;
    --input-bg: #fffef8;
    --input-border: var(--playful-outline);
    --input-focus: var(--playful-purple);
    --input-placeholder: #81798a;
    --btn-primary-bg: var(--playful-coral);
    --btn-primary-hover: var(--playful-coral);
    --btn-secondary-bg: var(--playful-yellow);
    --btn-secondary-hover: #ffe485;
    --btn-success-bg: var(--playful-green);
    --btn-success-hover: #bdf38e;
    --btn-danger-bg: #ff9b8c;
    --btn-danger-hover: #ffb0a4;
    --btn-warning-bg: var(--playful-yellow);
    --btn-warning-hover: #ffe485;
    --btn-info-bg: var(--playful-purple-soft);
    --btn-info-hover: #e5deff;
    --text-on-primary: var(--playful-ink);
    --text-on-secondary: var(--playful-ink);
    --text-on-success: var(--playful-ink);
    --text-on-danger: var(--playful-ink);
    --text-on-warning: var(--playful-ink);
    --text-on-info: var(--playful-ink);
    --link-color: #6246d6;
    --link-hover-color: #432ab8;
    --focus-ring: #6d4fe2;
    --card-shadow: var(--playful-shadow-sm);
    --card-shadow-hover: var(--playful-shadow);
    --shadow-light: rgb(40 34 55 / 8%);
    --shadow-medium: rgb(40 34 55 / 14%);
    --shadow-dark: rgb(40 34 55 / 22%);
    --shadow-sm: var(--playful-shadow-sm);
    --shadow-md: var(--playful-shadow);
    --shadow-xl: var(--playful-shadow-lg);
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --btn-radius: 0.9rem;
    --font-primary: "Avenir Next", "Nunito Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-fun: var(--font-primary);
}

/* Night colors separate readable text from quiet outlines and colored surfaces. */
[data-theme="dark"] {
    color-scheme: dark;
    --playful-ink: #d4d0d8;
    --playful-cream: #222127;
    --playful-paper: #2c2a32;
    --playful-outline: #504b59;
    --playful-shadow-color: #19181e;
    --playful-purple: #49405f;
    --playful-purple-soft: #393344;
    --playful-coral: #654740;
    --playful-yellow: #514831;
    --playful-green: #394c3c;
    --playful-muted: #b1aab9;
    --primary-color: #ad9acb;
    --secondary-color: var(--playful-purple-soft);
    --accent-color: #c5b184;
    --success-color: #9ab99a;
    --danger-color: #d3a39d;
    --info-color: #ad9acb;
    --warning-color: #c5b184;
    --bg-primary: var(--playful-cream);
    --bg-secondary: #302d36;
    --bg-tertiary: var(--playful-purple-soft);
    --bg-card: var(--playful-paper);
    --card-bg: var(--playful-paper);
    --card-border: var(--playful-outline);
    --border-light: #403c48;
    --border-medium: var(--playful-outline);
    --border-dark: #67606f;
    --border-color: var(--playful-outline);
    --text-primary: var(--playful-ink);
    --text-secondary: var(--playful-muted);
    --text-muted: #a79faf;
    --content-strong: var(--playful-ink);
    --content-muted: var(--playful-muted);
    --surface-canvas: var(--playful-cream);
    --surface-raised: var(--playful-paper);
    --surface-elevated: var(--playful-paper);
    --surface-subtle: #302d36;
    --surface-muted: #35313c;
    --input-bg: #25232b;
    --input-border: var(--playful-outline);
    --input-focus: #ad9acb;
    --input-placeholder: #a79faf;
    --btn-primary-bg: var(--playful-coral);
    --btn-primary-hover: #72524b;
    --btn-secondary-bg: var(--playful-yellow);
    --btn-secondary-hover: #5e533a;
    --btn-success-bg: var(--playful-green);
    --btn-success-hover: #435947;
    --btn-danger-bg: #62413f;
    --btn-danger-hover: #724d49;
    --btn-warning-bg: var(--playful-yellow);
    --btn-warning-hover: #5e533a;
    --btn-info-bg: var(--playful-purple-soft);
    --btn-info-hover: #49405f;
    --text-on-primary: var(--playful-ink);
    --text-on-secondary: var(--playful-ink);
    --text-on-success: var(--playful-ink);
    --text-on-danger: var(--playful-ink);
    --text-on-warning: var(--playful-ink);
    --text-on-info: var(--playful-ink);
    --link-color: #b7a7cd;
    --link-hover-color: #cec0df;
    --link-visited: #b7a7cd;
    --focus-ring: #ad9acb;
    --shadow-sm: var(--playful-shadow-sm);
    --shadow-md: var(--playful-shadow);
    --shadow-xl: var(--playful-shadow-lg);
}

[data-theme="dark"] .btn,
[data-theme="dark"] .page-primary-action,
[data-theme="dark"] .page-primary-action:hover,
[data-theme="dark"] .page-primary-action:focus {
    color: var(--playful-ink) !important;
}

/* Fixed daytime accent colors need their own night treatment. */
[data-theme="dark"] :is(.home-playful-kicker, .home-eyebrow, .home-playful-copy h1 em,
    .iron-plan-kicker, .photo-recommendation-kicker, .diary-story-kicker, .diary-story-edit,
    .diary-story-meta .fas) {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .home-note {
    color: var(--playful-ink) !important;
}

[data-theme="dark"] .home-note span,
[data-theme="dark"] .diary-story-photo-note {
    color: #c6bdcc;
}

[data-theme="dark"] .quick-actions a:nth-child(4) { background: var(--playful-coral); }
[data-theme="dark"] .album-carousel-section .bg-gradient-to-br {
    background: linear-gradient(135deg, var(--playful-purple), var(--playful-paper));
}
[data-theme="dark"] .iron-plan-panel { background: var(--playful-paper) !important; }
[data-theme="dark"] :is(.photo-meal-card:nth-of-type(3n + 1), .chess-lobby-card:first-child) {
    background: var(--playful-yellow) !important;
}
[data-theme="dark"] .photo-meal-card:nth-of-type(3n + 2) { background: var(--playful-green) !important; }
[data-theme="dark"] :is(.photo-meal-card:nth-of-type(3n), .chess-lobby-card:nth-child(2)) {
    background: var(--playful-purple-soft) !important;
}

html {
    background: var(--bg-primary);
}

body {
    min-width: 0;
    overflow-x: hidden;
    background-color: var(--surface-canvas);
    background-image:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--playful-yellow) 35%, transparent) 0 4rem, transparent 4.1rem),
        radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--playful-purple-soft) 28%, transparent) 0 5rem, transparent 5.1rem);
    color: var(--content-strong);
    font-family: var(--font-primary);
}

.app-main {
    max-width: var(--app-shell-max);
    padding-top: clamp(1.5rem, 4vw, 2.75rem);
}

/* Navigation */
.app-navigation {
    border: 0 !important;
    border-bottom: var(--playful-line) !important;
    background: color-mix(in srgb, var(--playful-paper) 94%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px);
}

.app-nav-row {
    min-height: 4.6rem;
    height: auto;
}

.app-brand {
    min-height: 3rem !important;
    color: var(--playful-ink);
    text-decoration: none;
}

.app-brand-mark {
    border: var(--playful-line);
    border-radius: 0.8rem;
    background: var(--playful-purple);
    box-shadow: var(--playful-shadow-sm);
    color: #fff;
    transform: rotate(-4deg);
}

.app-brand-name {
    color: var(--playful-ink) !important;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.app-desktop-nav {
    gap: 0.2rem;
}

.app-desktop-nav .nav-link {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    padding: 0.5rem 0.62rem;
    color: var(--playful-ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.app-desktop-nav .nav-link:hover {
    border-color: var(--playful-outline);
    background: var(--playful-yellow);
    color: var(--playful-ink);
}

.app-desktop-nav .nav-link.active,
.app-desktop-nav .nav-link[aria-current="page"] {
    border-color: var(--playful-outline);
    background: var(--playful-purple-soft);
    color: var(--playful-ink);
    text-decoration: none;
}

.app-theme-button,
.app-theme-toggle,
.mobile-nav-toggle,
.nav-logout,
.mobile-theme-button,
.mobile-logout-button {
    border: var(--playful-line) !important;
    border-radius: 0.8rem !important;
    background: var(--playful-paper) !important;
    box-shadow: 2px 2px 0 var(--playful-shadow-color) !important;
    color: var(--playful-ink) !important;
}

.app-theme-toggle {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
}

.app-theme-toggle:hover,
.app-theme-toggle:focus-visible {
    background: var(--playful-yellow) !important;
    transform: translate(-1px, -1px);
}

.app-theme-toggle .fas { font-size: 1.05rem; }

.app-theme-popup {
    overflow: hidden;
    border: var(--playful-line);
    border-radius: 1rem;
    background: var(--playful-paper);
    box-shadow: var(--playful-shadow);
    padding: 0.35rem;
}

.app-theme-popup button {
    border-radius: 0.65rem;
    color: var(--playful-ink);
    font-weight: 750;
}

.app-theme-popup button:hover {
    background: var(--playful-purple-soft);
}

.mobile-navigation {
    border-top: 2px dashed color-mix(in srgb, var(--playful-outline) 50%, transparent);
}

.mobile-navigation .nav-link {
    border: 2px solid transparent;
    color: var(--playful-ink);
    font-weight: 800;
    text-decoration: none;
}

.mobile-navigation .nav-link:hover,
.mobile-navigation .nav-link.active {
    border-color: var(--playful-outline);
    background: var(--playful-purple-soft) !important;
    color: var(--playful-ink);
}

.mobile-theme-row,
.mobile-logout {
    border-color: color-mix(in srgb, var(--playful-outline) 45%, transparent) !important;
}

/* Tactile foundations */
.card,
.stat-card,
.filter-toolbar,
.privacy-card,
.experience-recall,
.experience-panel,
.global-search-hero,
.search-result,
.timeline-entry article,
.goal-card,
.habit-card,
.idea-card,
.media-card,
.chess-lobby-card,
.recent-games,
.side-panel,
.waiting-panel,
.chess-game-bar,
.player-card,
.nutrition-pending-panel,
.iron-plan-panel {
    border: var(--playful-line) !important;
    border-radius: 1.2rem !important;
    background: var(--card-bg);
    box-shadow: var(--playful-shadow-sm) !important;
}

.card:hover,
.stat-card:hover,
.goal-card:hover,
.habit-card:hover,
.idea-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--playful-shadow) !important;
}

.btn {
    gap: 0.45rem;
    border: var(--playful-line) !important;
    border-radius: 0.9rem;
    background: var(--playful-coral);
    box-shadow: var(--playful-shadow-sm) !important;
    color: var(--playful-ink) !important;
    font-weight: 850;
    letter-spacing: 0;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn:hover,
.btn:focus {
    transform: translate(2px, 2px);
    background: #ff9a89;
    box-shadow: 1px 1px 0 var(--playful-shadow-color) !important;
    color: var(--playful-ink) !important;
}

.btn-secondary,
.btn-warning {
    background: var(--playful-yellow) !important;
}

.btn-success {
    background: var(--playful-green) !important;
}

.btn-danger {
    background: #ff9b8c !important;
}

.btn-info,
.btn-outline {
    background: var(--playful-purple-soft) !important;
}

.page-primary-action,
.page-primary-action:hover,
.page-primary-action:focus {
    background: var(--playful-coral) !important;
    color: var(--playful-ink) !important;
}

.form-input,
.form-select,
.form-textarea,
.filter-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.dialog-field),
select:not(.dialog-field),
textarea:not(.dialog-field) {
    border: var(--playful-line) !important;
    border-radius: 0.8rem !important;
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:not(.dialog-field):focus,
select:not(.dialog-field):focus,
textarea:not(.dialog-field):focus {
    border-color: var(--playful-purple) !important;
    outline: 3px solid color-mix(in srgb, var(--playful-purple) 24%, transparent) !important;
    outline-offset: 2px;
}

.page-heading-icon {
    border: var(--playful-line);
    border-radius: 0.9rem;
    background: var(--playful-yellow);
    box-shadow: var(--playful-shadow-sm);
    color: var(--playful-ink);
    transform: rotate(-3deg);
}

.page-title,
.section-title,
.card h2,
.card h3 {
    color: var(--playful-ink);
    font-weight: 900;
    letter-spacing: -0.025em;
}

.section-link {
    color: var(--link-color);
    font-weight: 850;
}

.summary-grid > * {
    border: var(--playful-line) !important;
    border-radius: 1rem !important;
    background: var(--playful-paper) !important;
    box-shadow: var(--playful-shadow-sm) !important;
    color: var(--playful-ink) !important;
}

.summary-grid > *:nth-child(1) { background: var(--playful-yellow) !important; }
.summary-grid > *:nth-child(2) { background: var(--playful-green) !important; }
.summary-grid > *:nth-child(3) { background: var(--playful-purple-soft) !important; }
.summary-grid > *:nth-child(4) { background: #ffa18f !important; }
.summary-grid > * :where(.text-2xl, .stat-number, .text-sm, .stat-label) { color: var(--playful-ink) !important; }

.alert,
.flash-message,
.experience-state,
.nutrition-capability-note {
    border: var(--playful-line) !important;
    border-radius: 0.9rem !important;
    box-shadow: 2px 2px 0 var(--playful-shadow-color);
}

.modal-content {
    border: var(--playful-line) !important;
    border-radius: 1.2rem !important;
    background: var(--playful-paper) !important;
    box-shadow: var(--playful-shadow-lg) !important;
}

/* Navigation groups keep every existing destination directly reachable. */
.app-desktop-nav .nav-section { display: flex; align-items: center; gap: .25rem; }
.app-desktop-nav .nav-section + .nav-section { padding-left: .6rem; border-left: 1px solid var(--border-color); }
.mobile-nav-section-title { margin: .6rem .75rem .4rem; color: var(--text-secondary); font-size: .75rem; }

/* Home collage */
.home-dashboard {
    gap: 0;
}

.home-playful-hero {
    order: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-bottom: clamp(2.4rem, 6vw, 4.5rem);
    padding: clamp(0.5rem, 2vw, 1rem) 0;
}

.home-playful-kicker,
.home-eyebrow {
    margin: 0 0 0.65rem;
    color: #6246d6;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.home-playful-copy h1 {
    max-width: 40rem;
    margin: 0;
    color: var(--playful-ink);
    font-size: clamp(2.8rem, 6vw, 5.1rem);
    font-weight: 950;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.home-playful-copy h1 em {
    color: #7254e7;
    font-style: normal;
}

.home-playful-lead {
    max-width: 34rem;
    margin: 1.35rem 0 0;
    color: var(--playful-muted);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.75;
}

.home-playful-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem;
}

.home-playful-text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    color: var(--playful-ink);
    font-weight: 850;
    text-decoration: none;
}

.home-playful-text-link:hover {
    color: #6246d6;
}

.home-board-wrap {
    position: relative;
    padding: 1.5rem 0.9rem 1.1rem;
}

.home-life-board {
    position: relative;
    min-height: 20rem;
    transform: rotate(1deg);
    border: 3px solid var(--playful-outline);
    border-radius: 1.6rem;
    background: var(--playful-purple);
    box-shadow: var(--playful-shadow-lg);
}

.home-note {
    position: absolute;
    display: block;
    border: var(--playful-line);
    background: var(--playful-paper);
    box-shadow: var(--playful-shadow-sm);
    padding: 1rem;
    color: var(--playful-ink);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-note:hover {
    z-index: 5;
    color: var(--playful-ink);
    box-shadow: var(--playful-shadow);
}

.home-note small {
    display: block;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.home-note strong {
    display: block;
    margin-top: 0.45rem;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 900;
    line-height: 1.35;
}

.home-note span {
    display: block;
    margin-top: 0.25rem;
    color: #5d5667;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.45;
}

.home-note-one {
    top: 1.8rem;
    left: 1.5rem;
    width: 48%;
    transform: rotate(-3deg);
    background: var(--playful-yellow);
}

.home-note-one:hover { transform: rotate(-3deg) translate(-1px, -2px); }

.home-note-two {
    top: 3rem;
    right: 1.35rem;
    width: 38%;
    transform: rotate(4deg);
    background: var(--playful-coral);
    text-align: center;
}

.home-note-two strong { font-size: 1.7rem; }
.home-note-two:hover { transform: rotate(4deg) translate(-1px, -2px); }

.home-note-three {
    right: 3.2rem;
    bottom: 1.65rem;
    left: 3.2rem;
}

.home-note-three:hover { transform: translate(-1px, -2px); }

.home-board-sticker {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    display: grid;
    width: 4.8rem;
    height: 4.8rem;
    place-items: center;
    transform: rotate(8deg);
    border: var(--playful-line);
    border-radius: 50% 46% 53% 45%;
    background: var(--playful-green);
    box-shadow: 2px 2px 0 var(--playful-shadow-color);
    color: var(--playful-ink);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.home-spark {
    position: absolute;
    z-index: 4;
    color: var(--playful-coral);
    font-size: 1.9rem;
    font-weight: 900;
}

.home-spark-one { top: 0; left: 0.6rem; transform: rotate(-12deg); }
.home-spark-two { top: 0.2rem; right: 1rem; color: var(--playful-green); transform: rotate(12deg); }

.home-quick-start {
    position: relative;
    margin-bottom: 2.5rem;
    border: var(--playful-line);
    border-radius: 1.35rem;
    background: var(--playful-paper);
    box-shadow: var(--playful-shadow);
}

.home-quick-start::before {
    content: "TODAY";
    position: absolute;
    top: -0.8rem;
    left: 1.5rem;
    transform: rotate(-2deg);
    border: var(--playful-line);
    background: var(--playful-green);
    padding: 0.2rem 0.65rem;
    color: var(--playful-ink);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.home-quick-start h2 {
    margin: 0;
    color: var(--playful-ink);
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.quick-actions {
    border: 0 !important;
    background: transparent !important;
}

.quick-actions a {
    border: var(--playful-line);
    border-radius: 1rem;
    background: var(--playful-paper);
    box-shadow: 3px 3px 0 var(--playful-shadow-color);
    color: var(--playful-ink);
    font-weight: 850;
}

.quick-actions a:nth-child(1) { background: var(--playful-yellow); }
.quick-actions a:nth-child(2) { background: var(--playful-green); }
.quick-actions a:nth-child(3) { background: var(--playful-purple-soft); }
.quick-actions a:nth-child(4) { background: #ffa18f; }

.quick-actions a:hover {
    transform: translate(2px, 2px);
    border-color: var(--playful-outline);
    box-shadow: 1px 1px 0 var(--playful-shadow-color);
    color: var(--playful-ink);
}

.quick-draft-form textarea {
    border: var(--playful-line);
}

.album-carousel-section > div,
.calendar-section > div {
    border: var(--playful-line);
    border-radius: 1.2rem !important;
    box-shadow: var(--playful-shadow) !important;
}

.calendar-header {
    background: var(--playful-purple) !important;
}

/* Feature pages retain their domain cues inside the shared frame. */
.privacy-card-heading > i,
.chess-card-mark,
.player-piece,
.timeline-marker {
    border: var(--playful-line);
    box-shadow: 2px 2px 0 var(--playful-shadow-color);
}

.privacy-card-heading > i { background: var(--playful-yellow); color: var(--playful-ink); }
.timeline-marker { background: var(--playful-purple); }

.iron-plan-panel {
    background: linear-gradient(145deg, var(--playful-paper), #fff1d2) !important;
}

.iron-plan-kicker,
.photo-recommendation-kicker {
    color: #6246d6 !important;
}

.photo-recommendation-controls,
.photo-meal-card,
.iron-plan-scope,
.iron-plan-principle,
.nutrition-pending-card {
    border: var(--playful-line) !important;
    border-radius: 1rem !important;
    background: var(--playful-paper) !important;
}

.photo-meal-card:nth-of-type(3n + 1) { background: #fff1b8 !important; }
.photo-meal-card:nth-of-type(3n + 2) { background: #e2ffd0 !important; }
.photo-meal-card:nth-of-type(3n) { background: #ebe5ff !important; }

.chess-page {
    --chess-wood: #e9ba70;
}

.chess-lobby-card:first-child { background: #fff1b8 !important; }
.chess-lobby-card:nth-child(2) { background: #e8e1ff !important; }
.recent-game { border: var(--playful-line) !important; }
.player-card.current-player { border-color: var(--playful-purple) !important; }

.progress-bar {
    overflow: hidden;
    border: 2px solid var(--playful-outline);
    background: var(--playful-paper);
}

.progress-fill {
    background: var(--playful-purple) !important;
}

.app-footer {
    margin-top: 4rem !important;
    border-top: var(--playful-line) !important;
    background: var(--playful-purple-soft) !important;
}

.app-footer p:first-child {
    color: var(--playful-ink);
    font-weight: 900;
}

.app-footer .text-gray-600,
.app-footer .text-sm {
    color: var(--playful-muted) !important;
}

/* Welcome photo entry: keep memories full-screen, make the affordance tactile. */
.playful-welcome {
    background: var(--playful-cream);
}

.playful-welcome .welcome-slide-default {
    background-image: linear-gradient(135deg, var(--playful-purple) 0 55%, var(--playful-coral) 55% 78%, var(--playful-yellow) 78% 100%);
}

.playful-welcome .welcome-hint {
    border: var(--playful-line);
    border-radius: 0.9rem;
    background: var(--playful-yellow);
    box-shadow: var(--playful-shadow);
    padding: 0.75rem 1rem;
    color: var(--playful-ink);
    font-size: 0.9rem;
    font-weight: 900;
    opacity: 1;
    text-shadow: none;
}

/* Login */
.playful-login {
    background-color: var(--playful-cream);
    background-image:
        radial-gradient(circle at 14% 12%, var(--playful-yellow) 0 5rem, transparent 5.1rem),
        radial-gradient(circle at 88% 84%, var(--playful-green) 0 6rem, transparent 6.1rem);
    color: var(--playful-ink);
    font-family: var(--font-primary);
}

.playful-login .login-card {
    position: relative;
    border: var(--playful-line);
    border-radius: 1.4rem;
    background: var(--playful-paper);
    box-shadow: var(--playful-shadow-lg);
}

.playful-login .login-card::before {
    content: "OUR LITTLE DAYS";
    position: absolute;
    top: -0.85rem;
    right: 1.25rem;
    transform: rotate(3deg);
    border: var(--playful-line);
    background: var(--playful-green);
    padding: 0.25rem 0.65rem;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.playful-login .login-brand-mark {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1.2rem;
    place-items: center;
    transform: rotate(-5deg);
    border: var(--playful-line);
    border-radius: 1rem;
    background: var(--playful-purple);
    box-shadow: var(--playful-shadow-sm);
    color: #fff;
    font-size: 1.3rem;
}

.playful-login h1 { color: var(--playful-ink); font-weight: 900; letter-spacing: -0.04em; }
.playful-login p { color: var(--playful-muted); }
.playful-login input { border: var(--playful-line) !important; }
.playful-login button {
    border: var(--playful-line);
    border-radius: 0.9rem;
    background: var(--playful-coral);
    box-shadow: var(--playful-shadow-sm);
    color: var(--playful-ink);
    font-weight: 900;
}

.playful-login button:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--playful-shadow-color);
}

@media (max-width: 1023px) {
    .home-playful-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-board-wrap {
        order: -1;
        width: min(100%, 42rem);
        margin: 0 auto;
        padding-top: 0.3rem;
    }

    .home-life-board { min-height: 18rem; }
}

@media (max-width: 639px) {
    body {
        background-image: radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--playful-purple-soft) 30%, transparent) 0 3rem, transparent 3.1rem);
    }

    .app-nav-row { min-height: 4.2rem; }
    .app-brand-mark { width: 2.35rem; height: 2.35rem; }
    .app-brand-name { font-size: 0.98rem; }

    .home-playful-hero { margin-bottom: 2.5rem; }
    .home-playful-copy h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
    .home-playful-lead { font-size: 0.94rem; }
    .home-playful-actions { align-items: stretch; flex-direction: column; }
    .home-playful-actions .btn,
    .home-playful-text-link { width: 100%; justify-content: center; }

    .home-board-wrap { padding-inline: 0.25rem; }
    .home-life-board { min-height: 15.5rem; border-radius: 1.2rem; }
    .home-note { padding: 0.75rem; }
    .home-note-one { top: 1.2rem; left: 0.8rem; width: 53%; }
    .home-note-two { top: 2.1rem; right: 0.7rem; width: 39%; }
    .home-note-three { right: 1.4rem; bottom: 1.1rem; left: 1.4rem; }
    .home-note-three strong { font-size: 0.86rem; }
    .home-note-three span { display: none; }
    .home-board-sticker { right: -0.35rem; width: 4.1rem; height: 4.1rem; font-size: 0.64rem; }

    .home-quick-start { padding: 1.25rem; }
    .home-quick-start::before { left: 1rem; }

    .card,
    .stat-card,
    .filter-toolbar { box-shadow: 3px 3px 0 var(--playful-ink) !important; }

    .playful-login .login-card { padding: 2rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .home-note,
    .quick-actions a,
    .playful-login button {
        transition: none;
    }

    .home-note:hover,
    .quick-actions a:hover,
    .btn:hover,
    .playful-login button:hover {
        transform: none;
    }
}