/* Base Layout Reset configuration */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #d9eeec;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


/* Hardware Notch Simulation */
.notch {
    width: 150px;
    height: 28px;
    background-color: #1e293b;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    z-index: 20;
}

/* System Top Bar Layout */
.status-bar {
    height: 44px;
    padding: 0 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    z-index: 10;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

/* WebGL Target Render Viewport Block */
#canvas-container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top:0;
    left:0;
    
    pointer-events: auto;
}

#canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Full-screen black overlay used to transition between scenes (reef <-> fish tank) */
#scene-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    transition: opacity 0.8s ease;
}

#scene-fade.active {
    opacity: 1;
}

#ui-layer {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 5;
    pointer-events: none; /* Let clicks pass through to the canvas */
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#month-title {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    transition: color 0.4s ease;
}

#status-text {
    font-size: 13px;
    font-weight: 400;
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 14px;
    border-radius: 14px;
    display: inline-block;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.checkin-btn {
    display: block;
    margin-top: 14px;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.55);
    color: #2c4a47;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 9px 18px;
    border-radius: 20px;
    cursor: pointer;
    text-shadow: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.4s ease;
}

.checkin-btn:hover {
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

/* Check-in Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 31, 36, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-box {
    background: #f4f9f8;
    color: #2c4a47;
    width: min(440px, 88vw);
    border-radius: 18px;
    padding: 28px 26px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.modal-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.modal-subtitle {
    font-size: 13px;
    opacity: 0.65;
    margin-bottom: 16px;
}

.checkin-textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border: 1px solid rgba(44, 74, 71, 0.2);
    border-radius: 10px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    color: #2c4a47;
    background: #ffffff;
    outline: none;
}

.checkin-textarea:focus {
    border-color: #2c4a47;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.modal-btn {
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 16px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.modal-btn-secondary {
    background: transparent;
    color: #2c4a47;
    opacity: 0.6;
}

.modal-btn-secondary:hover {
    opacity: 1;
}

.modal-btn-primary {
    background: #2c4a47;
    color: #ffffff;
}

.modal-btn-primary:hover {
    opacity: 0.88;
}

/* Journal / About side panels (slide in from the right) */
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(380px, 90vw);
    z-index: 150;
    display: flex;
    align-items: center;
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.side-panel.hidden {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.side-panel-box {
    position: relative;
    background: #f4f9f8;
    color: #2c4a47;
    width: 100%;
    height: 100%;
    padding: 90px 28px 28px;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow-y: auto;
    pointer-events: auto;
}

.panel-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #2c4a47;
    opacity: 0.5;
    cursor: pointer;
}

.panel-close:hover {
    opacity: 1;
}

.panel-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.panel-subtitle {
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 20px;
}

.journal-entry-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.journal-entry {
    background: rgba(44, 74, 71, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
}

.journal-entry-date {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.5;
    margin-bottom: 4px;
}

.journal-entry-text {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.journal-empty {
    font-size: 13px;
    opacity: 0.6;
    line-height: 1.6;
}

/* Journal Page - full screen overlay */
.journal-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 180;
    background: linear-gradient(165deg, #cdeae8 0%, #6fb8cc 35%, #2f7a9e 70%, #134766 100%);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #e0f5f3;
}

.journal-page.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.journal-scroll {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 140px 32px 100px;
}

.journal-page-title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.journal-page-subtitle {
    font-size: 15px;
    opacity: 0.75;
    margin-bottom: 40px;
}

/* Re-skin the entry list + cards for the dark gradient background --
   the original .journal-entry / .journal-empty rules above were written
   for the light side-panel and stay in place for backwards compatibility,
   these overrides apply specifically inside the new full-page container. */
.journal-page .journal-entry-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.journal-page .journal-entry {
    background: rgba(100, 220, 200, 0.08);
    border: 1px solid rgba(120, 220, 200, 0.18);
    border-radius: 16px;
    padding: 18px 22px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 1px rgba(120, 220, 200, 0.1), 0 4px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease;
}

.journal-page .journal-entry:hover {
    background: rgba(100, 220, 200, 0.14);
}

.journal-page .journal-entry-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.65;
    margin-bottom: 6px;
}

.journal-page .journal-entry-text {
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.journal-page .journal-empty {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.75;
}

/* Attached images in a past entry */
.journal-entry-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.journal-entry-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.journal-entry-img:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}


/* glass-card retained for any other usage, but calendar/notebook no longer use it */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 22px 24px;
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 6px 28px rgba(0, 0, 0, 0.14);
}

/* Calendar on the left, diary on the right. Calendar gets a fixed-ish width
   since its 7-column grid has a natural shape it shouldn't stretch beyond;
   the write area flexes to fill the remaining space and stretches to match
   the calendar's height so the two cards form one clean visual row. */
.journal-top-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 22px;
    min-height: 420px;
}

.journal-top-row .journal-calendar {
    flex: 0 0 300px;
    margin-bottom: 0;
    /* No card background — blends into page */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 12px 0 0;
}

.journal-top-row .journal-notebook {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Stack vertically on narrower screens */
@media (max-width: 760px) {
    .journal-top-row {
        flex-direction: column;
    }
    .journal-top-row .journal-calendar {
        flex: 1 1 auto;
        padding: 0;
    }
}

/* --- Calendar widget --- */
.journal-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.journal-calendar-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.cal-nav-btn {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
}

.cal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: scale(1.05);
}

.journal-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.55;
    margin-bottom: 8px;
}

.journal-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    background: transparent;
    border: none;
    color: #ffffff;
}

.cal-day:hover {
    background: rgba(255, 255, 255, 0.14);
}

.cal-day.cal-day-empty {
    cursor: default;
    pointer-events: none;
}

/* Circle highlight on any day that has at least one saved entry */
.cal-day.has-entry {
    font-weight: 700;
}

.cal-day.has-entry::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid rgba(174, 240, 238, 0.85);
    pointer-events: none;
}

/* Today's date gets a soft filled dot beneath the number instead of the ring,
   so "today" and "has an entry" stay visually distinct even when both apply. */
.cal-day.is-today {
    color: #aef0ee;
}

.cal-day.is-selected {
    background: #ffffff;
    color: #134766;
}

.cal-day.is-selected.has-entry::after {
    border-color: rgba(19, 71, 102, 0.5);
}

.cal-clear-btn {
    display: block;
    margin: 14px auto 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cal-clear-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.cal-clear-btn.hidden {
    display: none;
}

/* --- Diary notebook widget --- */
.journal-notebook {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    /* note.png stretched to fill the entire widget */
    background-image: url('assets/note.png');
    background-size: 100% 100%;
    background-position: left top;
    /* Subtle drop shadow to lift the page */
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
    /* Stretch to fill the flex row's full height */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
}

/* Semi-transparent dark overlay so text is clearly legible on the paper */
.notebook-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 30, 40, 0.38);
    pointer-events: none;
    z-index: 1;
}

/* All actual content sits above the overlay */
.notebook-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* left pad pushes text past the hole-punches AND the red margin line */
    padding: 28px 32px 20px 100px;
}

/* Warm, handwritten-feel date header */
.notebook-date-header {
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 230, 180, 0.9);
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
}

/* Transparent textarea — writes on top of the note paper */
.journal-page-textarea {
    width: 100%;
    flex: 1 1 auto;
    min-height: 260px;
    resize: none;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 2.05; /* lines sit nicely on the paper's ruled lines */
    color: rgba(255, 248, 230, 0.95);
    caret-color: rgba(255, 230, 180, 0.9);
    padding: 0;
    box-sizing: border-box;
}

.journal-page-textarea::placeholder {
    color: rgba(255, 230, 180, 0.4);
    font-style: italic;
}

.journal-page-textarea:focus {
    background: transparent;
}

/* Image attachment thumbnails strip */
.notebook-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.notebook-attachment-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.notebook-attachment-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.notebook-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.notebook-attachment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    display: none;
    z-index: 5;
}

.notebook-attachment-thumb:hover .notebook-attachment-remove {
    display: block;
}

/* Bottom toolbar row */
.journal-write-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.notebook-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Attach photo button */
.notebook-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 230, 180, 0.8);
    cursor: pointer;
    border: 1px solid rgba(255, 230, 180, 0.3);
    border-radius: 20px;
    padding: 5px 12px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    letter-spacing: 0.2px;
}

.notebook-attach-btn:hover {
    background: rgba(255, 230, 180, 0.12);
    color: rgba(255, 230, 180, 1);
    border-color: rgba(255, 230, 180, 0.6);
}

.journal-write-status {
    font-size: 12px;
    color: rgba(255, 230, 180, 0.65);
    font-style: italic;
}

/* Warm teal save button */
.notebook-save-btn {
    background: rgba(255, 230, 180, 0.15);
    border: 1.5px solid rgba(255, 230, 180, 0.5);
    color: rgba(255, 230, 180, 0.95);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 8px 20px;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.notebook-save-btn:hover {
    background: rgba(255, 230, 180, 0.28);
    border-color: rgba(255, 230, 180, 0.85);
    transform: scale(1.03);
}

.notebook-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Guide Narration Bar - liquid glass style */
.guide-bar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 28px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 0 -1px 8px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.4s ease, border-color 0.4s ease;
}

.guide-bar.hidden {
    display: none;
}

.guide-bar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Light-scene variant (Home/reef): glassy white, navy text */
.guide-bar.theme-light {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
}

.guide-bar.theme-light .guide-bar-text {
    color: #1b2f4d;
    text-shadow: none;
}

.guide-bar.theme-light .guide-bar-hint {
    color: rgba(27, 47, 77, 0.65);
}

.guide-bar.theme-light .key-cap {
    border-color: rgba(27, 47, 77, 0.35);
    color: #1b2f4d;
}

.guide-bar.theme-light .guide-bar-icon-frame {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Dark-scene variant (Sanctuary/tank): glassy dark, white text */
.guide-bar.theme-dark {
    background: rgba(11, 31, 36, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 8px rgba(0, 0, 0, 0.25);
}

.guide-bar.theme-dark .guide-bar-text {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.guide-bar.theme-dark .guide-bar-hint {
    color: rgba(255, 255, 255, 0.7);
}

.guide-bar.theme-dark .key-cap {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.guide-bar.theme-dark .guide-bar-icon-frame {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Circular glass "frame" behind the icon, so it reads as a deliberate avatar
   slot rather than a floating image with no container. */
.guide-bar-icon-frame {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
}

.guide-bar-icon {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.guide-bar-text {
    flex: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    transition: color 0.4s ease;
}

.guide-bar-hint {
    flex-shrink: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.4s ease;
}

.key-cap {
    border: 1px solid;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Talk to a fish trigger button (Sanctuary only) */
.talk-to-fish-btn {
    position: fixed;
    bottom: 90px;
    right: 28px;
    z-index: 115;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #2c4a47;
    border: none;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 22px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.15s ease;
}

.talk-to-fish-btn.hidden {
    display: none;
}

.talk-to-fish-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.talk-to-fish-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Chat panel */
.chat-panel-box {
    display: flex;
    flex-direction: column;
    padding: 90px 24px 24px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    background: rgba(244, 249, 248, 0.85);
    padding: 4px 18px;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    align-self: flex-start;
}

.chat-header-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.chat-header .panel-title {
    margin-bottom: 0;
}

.chat-header .panel-subtitle {
    margin-bottom: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    min-height: 200px;
}

.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-msg-user {
    align-self: flex-end;
    background: #2c4a47;
    color: #ffffff;
}

.chat-msg-assistant {
    align-self: flex-start;
    background: rgba(244, 249, 248, 0.85);
    color: #2c4a47;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Thinking placeholder bubble: same shape as a normal assistant bubble,
   just sized to snugly fit the spinner instead of a line of text. */
.chat-msg-thinking {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
}

/* Three-dot typing indicator (Instagram/Messenger style) -- each dot bounces
   up and down in turn via staggered animation-delay, rather than all three
   moving in sync, which is what actually sells the "typing" rhythm. */
.chat-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(44, 74, 71, 0.55);
    animation: chatDotBounce 1.1s ease-in-out infinite;
}

.chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.chat-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.chat-crisis-box {
    background: #fff4e8;
    border: 1px solid #e8c79a;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b4a23;
}

.chat-crisis-box ul {
    margin: 8px 0;
    padding-left: 18px;
}

.chat-crisis-box span {
    display: block;
    margin-top: 6px;
    opacity: 0.85;
}

.chat-input-row {
    display: flex;
    gap: 10px;
    background: rgba(244, 249, 248, 0.85);
    padding: 8px;
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.chat-input {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    color: #2c4a47;
    outline: none;
    transition: background 0.2s ease;
}

.chat-input:focus {
    border-color: #2c4a47;
}

.chat-send-btn {
    flex-shrink: 0;
}

.chat-disclaimer {
    font-size: 11px;
    opacity: 0.55;
    margin-top: 10px;
    line-height: 1.4;
}

#start-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    padding: 100px 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #2c4a47;
    cursor: default;
    transition: opacity 2.0s ease;
    visibility: visible;
    pointer-events: auto;
    background: #d9eeec;
    overflow: hidden;
}

/* Once zooming starts, the background fades out slower than the brand text
   so the zooming island reads clearly against it for a beat before the
   whole overlay disappears. Total duration matches the JS setTimeout delay
   (1100ms) before display:none is applied. */
#start-overlay.fade-out {
    transition: opacity 0.9s ease 0.3s;
    opacity: 0;
}

#start-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
}

/* Brand title fades out quickly on click, well before the overlay itself,
   so it doesn't visually fight the zooming island. (.cube-hint has its own
   dedicated fade-in/pulse/fade-out animation defined further below, so it's
   intentionally not included in this generic transition rule.) */
.brand {
    transition: opacity 0.35s ease;
}

#start-overlay.fade-out .brand {
    opacity: 0;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.brand h1 {
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 18px;
    line-height: 1;
    text-align: center;
    color: #2c4a47;
    text-shadow: none;
}

.brand p {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    opacity: 0.55;
    text-align: center;
    color: #4f6b67;
    text-shadow: none;
}

.cube-stage {
    position: relative;
    width: 460px;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s ease 0.2s;
}

/* Triggered by JS the instant the island is clicked -- scales the whole
   cube stage up dramatically, as if the camera is pushing into the island,
   then fades it out near the end so it doesn't just freeze oversized on
   screen once the 3D scene underneath is ready. */
.cube-stage.zooming {
    transform: scale(6);
    opacity: 0;
}

.cube-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.cube-stage:hover .cube-image {
    transform: scale(1.03);
}

/* Hint text below the island, nudging the user to click. Fades in after a
   short delay so it doesn't compete with the brand title on first paint,
   then gently pulses to draw the eye without being distracting. */
.cube-hint {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4f6b67;
    opacity: 0;
    animation:
        cubeHintFadeIn 1s ease 1.4s forwards,
        cubeHintPulse 2.4s ease-in-out 2.4s infinite;
}

/* Fades out quickly the moment the island is clicked, via JS adding this class */
.cube-hint.hint-hidden {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes cubeHintFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 0.7; transform: translateY(0); }
}

@keyframes cubeHintPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

.float-cube {
    position: absolute;
    pointer-events: none;
    animation: floatUpDown 4s ease-in-out infinite;
}

.fc-1 { width: 70px; top: 30%; left: -4%; animation-delay: 0s; }
.fc-2 { width: 56px; top: 28%; right: -2%; animation-delay: -1.4s; }
.fc-3 { width: 46px; top: 52%; left: -10%; animation-delay: -2.6s; }
.fc-4 { width: 40px; top: 54%; right: -8%; animation-delay: -0.8s; }

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Top Bar: logo only now -- the 4 section links live in .side-nav below.
   Shrunk to a compact pill instead of a full-width bar since it no longer
   needs to host the nav-links. */
.top-nav {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 14px 22px;
    border-radius: 24px;
    font-family: Arial, sans-serif;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 8px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    /* Hidden until the start overlay is dismissed -- JS adds .visible after a
       short delay following the cube click (timed to land after the zoom has
       had a moment to read), so the nav arrives with a slow, gentle fade
       rather than popping in immediately alongside the zoom. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: background 0.4s ease, border-color 0.4s ease, opacity 1.1s ease, transform 1.1s ease, visibility 1.1s ease;
}

.top-nav.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.top-nav .nav-logo {
    color: #2c4a47;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: none;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Dark-scene variant: nav text/logo switch to white, and the glass itself
   darkens, so it stays legible against the Tank of Echoes' dark background.
   Applies to both .top-nav (logo) and .side-nav (links) since tank.js
   toggles .theme-dark on .top-nav specifically -- .side-nav picks up the
   same theme via the shared selector below. */
.top-nav.theme-dark {
    background: rgba(11, 31, 36, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 8px rgba(0, 0, 0, 0.25);
}

.top-nav.theme-dark .nav-logo {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Side Navigation: floating vertical glassmorphism pill, docked to the
   right edge, vertically centered. Designed for wide/iPad-style screens. */
.side-nav {
    position: fixed;
    top: 50%;
    right: 24px;
    z-index: 200;
    pointer-events: auto;
    padding: 18px 10px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 8px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    /* Hidden until the start overlay is dismissed -- combines the existing
       vertical-centering translateY(-50%) with a small rightward offset for
       the reveal animation, since both need to apply to the same transform.
       JS adds .visible after a short delay (timed with the top-nav) so both
       arrive together with a slow fade, after the zoom has had a moment. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(16px);
    transition: background 0.4s ease, border-color 0.4s ease, opacity 1.1s ease, transform 1.1s ease, visibility 1.1s ease;
}

.side-nav.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.side-nav .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    list-style: none;
}

.side-nav .nav-links button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    height: 56px;
    background: none;
    border: none;
    color: #2c4a47;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border-radius: 50%;
    transition:
        background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.4s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.side-nav .nav-links button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-nav .nav-links button span {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
}

.side-nav .nav-links button:hover {
    background: rgba(44, 74, 71, 0.08);
    transform: scale(1.04);
}

/* Tactile press-down feedback, separate from the persistent .active state */
.side-nav .nav-links button:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Active item gets the raised circular highlight, matching the reference's
   center-highlighted bottom-nav treatment -- just reoriented vertically.
   The bouncy cubic-bezier above gives this a gentle overshoot/spring feel
   when an item becomes active, rather than a flat linear snap. */
.side-nav .nav-links button.active {
    background: #2c4a47;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(44, 74, 71, 0.35);
}

.side-nav .nav-links button.active svg {
    transform: scale(1.05);
}

.side-nav.theme-dark {
    background: rgba(11, 31, 36, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 8px rgba(0, 0, 0, 0.25);
}

.side-nav.theme-dark .nav-links button {
    color: #ffffff;
}

.side-nav.theme-dark .nav-links button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.side-nav.theme-dark .nav-links button.active {
    background: #ffffff;
    color: #2c4a47;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Bottom tab bar for phone-width screens. Reuses the exact same markup
   (.side-nav .nav-links) but the media query below re-flows it into a
   horizontal floating pill anchored to the bottom edge instead of the
   right edge, matching standard iOS tab-bar conventions. */
@media (max-width: 768px) {
    .side-nav {
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        padding: 10px 18px;
        border-radius: 28px;
        transform: translateY(12px);
    }

    .side-nav.visible {
        transform: translateY(0);
    }

    .side-nav .nav-links {
        flex-direction: row;
        justify-content: space-around;
    }
}


.top-nav, 
.side-nav, 
.chat-panel {
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Slow, smooth fade duration */
    pointer-events: none; /* Prevents clicks while invisible */
}

/* Class added by JavaScript to trigger the fade-in */
.top-nav.visible, 
.side-nav.visible, 
.chat-panel.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Apply this to any element you want to fade smoothly */
.fade-element {
    opacity: 0;
    transition: opacity 2.0s ease-in-out; /* Slow 2-second fade */
}

/* Add this class to trigger the fade */
.fade-element.visible {
    opacity: 1;
}

/* Ensure the nav and panels are included */
.top-nav, 
.side-nav, 
.chat-panel {
    opacity: 0;
    transition: opacity 2.0s ease-in-out;
}

.top-nav.visible, 
.side-nav.visible, 
.chat-panel.visible {
    opacity: 1;
}

/* Memory Island click widget - small floating card, anchored near the click
   point on the reef scene (not a full side-panel). */
.island-widget {
    position: fixed;
    z-index: 160;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(244, 249, 248, 0.96);
    color: #2c4a47;
    border-radius: 18px;
    padding: 20px 20px 18px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.island-widget.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.island-widget-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #2c4a47;
    opacity: 0.45;
    cursor: pointer;
}

.island-widget-close:hover {
    opacity: 0.9;
}

.island-widget-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.55;
    margin-bottom: 6px;
}

.island-widget-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-right: 20px;
}

.island-widget-summary {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0.85;
    margin-bottom: 14px;
}

/* Gentle encouragement line -- visually set apart from the factual summary
   with a soft tinted background, like a small handwritten note tucked in. */
.island-widget-advice {
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
    color: #2c4a47;
    background: rgba(143, 184, 176, 0.14);
    border-left: 3px solid rgba(143, 184, 176, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.island-widget-entries {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(44, 74, 71, 0.12);
    padding-top: 12px;
}

.island-widget-entry {
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.75;
    background: rgba(44, 74, 71, 0.05);
    border-radius: 10px;
    padding: 8px 10px;
    white-space: pre-wrap;
}

/* Subtle color accent on the widget's left edge, echoing the island's mood
   color (mirrors agent.js's coralColorBySentiment palette). */
.island-widget.mood-positive { border-left: 4px solid #ffb86b; }
.island-widget.mood-neutral { border-left: 4px solid #8fb8b0; }
.island-widget.mood-negative { border-left: 4px solid #6b7fa3; }
.island-widget.mood-mixed { border-left: 4px solid #c9a7d1; }

/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   These rules only apply to screens smaller than 768px (phones & small tablets).
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Chat panel: full screen overlay on mobile for a clean experience */
    #chat-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        transform: translateX(0) !important;
        background: rgba(11, 31, 36, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 200;
    }

    #chat-panel.hidden {
        transform: translateX(100%) !important;
        opacity: 0;
    }

    #chat-panel .chat-panel-box {
        border-radius: 0 !important;
        padding: 70px 16px 110px !important;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #chat-panel .panel-close {
        color: #ffffff;
        opacity: 0.9;
        text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }

    /* Journal page: full width is correct */
    #journal-page {
        width: 100%;
    }

    /* 2. Check-in Modal Full Width */
    .modal-box {
        width: 90vw !important;
        max-width: 400px !important;
        padding: 24px;
    }

    /* 3. Journal Page Adjustments */
    .journal-scroll {
        padding: 80px 16px 120px !important;
    }

    .journal-top-row {
        gap: 16px;
    }

    /* 4. UI Layer positioning to avoid crowding */
    #ui-layer {
        top: 140px;
        left: 16px;
    }

    .guide-bar {
        bottom: 110px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        padding: 12px 16px;
        gap: 12px;
    }
    .guide-bar-icon {
        width: 32px;
        height: 32px;
    }
    #guide-bar-text {
        font-size: 13px;
        line-height: 1.3;
    }

    .talk-to-fish-btn {
        bottom: 110px;
    }

    #month-title {
        font-size: 24px;
    }
}

/* ---- Tank of Echoes: floating bubble tooltips --------------------------------
   Each time the user sends a chat message, a 3D bubble rises from the tank
   floor. After 3-4 seconds, this DOM element pops in and follows the bubble
   via JS projection, fading out when the bubble exits the top of the tank. */
.tank-bubble-tooltip {
    position: fixed;
    z-index: 100;
    max-width: 180px;
    background: rgba(244, 252, 255, 0.25);
    color: #1a4a5a;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 7px 11px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(180, 230, 245, 0.55);
    pointer-events: auto;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease;
    white-space: normal;
    word-break: break-word;
}

.tank-bubble-tooltip:hover {
    background: rgba(244, 252, 255, 0.85);
    transform: scale(1.08);
    z-index: 105;
}


/* ==========================================================================
   Visual refresh (Sep 2026): one palette across the app, taken from the
   start screen -- soft teal background, deep teal text, sage accents,
   white "sea glass" cards. Everything below overrides earlier rules.
   ========================================================================== */
:root {
    --lr-bg-top: #e4f3f1;
    --lr-bg-bottom: #bfdfdb;
    --lr-ink: #24423f;
    --lr-ink-soft: #587471;
    --lr-teal: #1f8a80;
    --lr-teal-soft: #8fcfc8;
    --lr-card: rgba(255, 255, 255, 0.62);
    --lr-card-border: rgba(255, 255, 255, 0.9);
    --lr-shadow: 0 10px 34px rgba(36, 66, 63, 0.12);
    --lr-paper: #fbfaf5;
    --lr-rule: rgba(31, 138, 128, 0.14);
}

/* Reef title: dark text above water, white once submerged / in the tank */
#ui-layer { color: var(--lr-ink); text-shadow: none; }
#ui-layer #status-text {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--lr-ink);
}
#ui-layer.on-dark { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.25); }
#ui-layer.on-dark #status-text {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* ---- Journal + About pages ---- */
.journal-page {
    background: linear-gradient(180deg, var(--lr-bg-top) 0%, #d3ebe8 55%, var(--lr-bg-bottom) 100%);
    color: var(--lr-ink);
}
.journal-page-title {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--lr-ink);
}
.journal-page-subtitle {
    color: var(--lr-ink-soft);
    opacity: 1;
    letter-spacing: 0.02em;
}
.journal-page .panel-close { color: var(--lr-ink); }

/* Calendar: a proper card instead of floating numbers */
.journal-top-row { align-items: stretch; gap: 24px; min-height: 0; }
.journal-top-row .journal-calendar {
    flex: 0 0 320px;
    background: var(--lr-card);
    border: 1px solid var(--lr-card-border);
    border-radius: 20px;
    padding: 20px 20px 18px;
    box-shadow: var(--lr-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-self: flex-start;
}
.journal-calendar-title { color: var(--lr-ink); }
.journal-calendar-weekdays { color: var(--lr-ink-soft); opacity: 1; }
.cal-nav-btn {
    background: #ffffff;
    border: 1px solid rgba(36, 66, 63, 0.12);
    color: var(--lr-ink);
}
.cal-nav-btn:hover { background: #eef7f6; }
.cal-day { color: var(--lr-ink); }
.cal-day:hover { background: rgba(31, 138, 128, 0.08); }
.cal-day.is-today { color: var(--lr-teal); font-weight: 700; }
.cal-day.has-entry { background: rgba(143, 207, 200, 0.35); }
.cal-day.has-entry::after { border-color: var(--lr-teal); }
.cal-day.is-selected { background: var(--lr-ink); color: #ffffff; }
.cal-day.is-selected.has-entry::after { border-color: rgba(255, 255, 255, 0.6); }
.cal-clear-btn {
    background: #ffffff;
    border: 1px solid rgba(36, 66, 63, 0.14);
    color: var(--lr-ink);
}
.cal-clear-btn:hover { background: #eef7f6; }

/* Notebook: clean ruled paper instead of the dark photo texture */
.journal-notebook {
    background-image: none;
    background-color: var(--lr-paper);
    border-radius: 20px;
    border: 1px solid rgba(36, 66, 63, 0.08);
    box-shadow: var(--lr-shadow);
}
.notebook-overlay { display: none; }
.notebook-content { padding: 26px 30px 20px; }
.notebook-date-header {
    font-family: 'Georgia', serif;
    color: var(--lr-teal);
    border-bottom: 1px solid var(--lr-rule);
    font-size: 14px;
}
.journal-page-textarea {
    color: var(--lr-ink);
    caret-color: var(--lr-teal);
    font-size: 16px;
    line-height: 32px;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--lr-rule) 31px, var(--lr-rule) 32px) !important;
    background-attachment: local;
    min-height: 288px;
}
.journal-page-textarea::placeholder { color: rgba(36, 66, 63, 0.35); }
.notebook-attach-btn {
    color: var(--lr-ink) !important;
    background: #ffffff !important;
    border: 1px solid rgba(36, 66, 63, 0.16) !important;
}
.notebook-save-btn {
    background: var(--lr-ink) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(36, 66, 63, 0.25) !important;
}
.notebook-save-btn:hover { background: #1a3431 !important; }
.notebook-save-btn:disabled { opacity: 0.6; cursor: wait; }
.journal-write-status { color: var(--lr-teal) !important; }
.notebook-attachment-thumb { border-color: rgba(36, 66, 63, 0.15); }

/* Past entries */
.journal-page .journal-entry {
    background: var(--lr-card);
    border: 1px solid var(--lr-card-border);
    box-shadow: var(--lr-shadow);
    color: var(--lr-ink);
}
.journal-page .journal-entry:hover { background: rgba(255, 255, 255, 0.8); }
.journal-page .journal-entry-date { color: var(--lr-teal); opacity: 1; }
.journal-page .journal-empty {
    color: var(--lr-ink-soft);
    opacity: 1;
    text-align: center;
    padding: 28px 0;
}
.journal-entry-img { border-color: rgba(36, 66, 63, 0.12); }

@media (max-width: 760px) {
    .journal-top-row .journal-calendar { flex: 1 1 auto; align-self: stretch; padding: 16px; }
    .journal-page-title { font-size: 24px; }
    .notebook-content { padding: 20px 18px 16px; }
}

/* ==========================================================================
   Visual upgrade, part 2: typography, guide bar, chat, About page.
   Fraunces (display) + Inter (text) -- same pairing as the portfolio site.
   ========================================================================== */
:root {
    --lr-display: 'Fraunces', Georgia, serif;
    --lr-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
body, #ui-layer, .journal-page, .guide-bar, .side-panel, .island-widget,
.tank-bubble-tooltip, .talk-to-fish-btn, .modal-box, #start-overlay {
    font-family: var(--lr-text);
}

/* One title style everywhere: Your Reef, Tank of Echoes, Journal, About */
#month-title,
.journal-page-title,
.panel-title,
.island-widget-title {
    font-family: var(--lr-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
}
#month-title { font-size: 34px; }
.journal-page-title { font-size: 44px; line-height: 1.1; color: var(--lr-ink); }
.brand p { font-family: var(--lr-text); font-weight: 500; }
#status-text { font-size: 12.5px; font-weight: 500; }

/* ---- Guide bar: a compact card instead of a full-width banner ---- */
.guide-bar {
    left: 50%;
    right: auto;
    width: min(620px, calc(100vw - 40px));
    transform: translate(-50%, 40px);
    padding: 14px 20px;
    gap: 16px;
    border-radius: 20px;
}
.guide-bar.visible { transform: translate(-50%, 0); }
.guide-bar.theme-light {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 36px rgba(36, 66, 63, 0.16);
}
.guide-bar.theme-light .guide-bar-text { color: var(--lr-ink); }
.guide-bar.theme-dark {
    background: rgba(12, 36, 41, 0.78);
    border-color: rgba(143, 207, 200, 0.25);
}
.guide-bar-text, #guide-bar-text { font-size: 14px; line-height: 1.5; }
.guide-bar-icon-frame { width: 48px; height: 48px; flex-shrink: 0; }
.guide-bar-hint-touch { display: none; font-size: 12px; opacity: 0.6; white-space: nowrap; }
@media (hover: none) {
    .guide-bar-hint { display: none !important; }
    .guide-bar-hint-touch { display: block; }
}

/* ---- Talk to a fish + chat ---- */
.talk-to-fish-btn {
    font-family: var(--lr-text);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92);
    color: var(--lr-ink);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
@media (min-width: 769px) {
    /* keep the chat clear of the right-hand nav pill */
    #chat-panel { right: 112px; top: 24px; bottom: 24px; height: auto; width: min(400px, 40vw); }
    #chat-panel .chat-panel-box {
        height: 100%;
        width: 100%;
        padding: 20px !important;
        background: rgba(10, 30, 35, 0.72) !important;
        border: 1px solid rgba(143, 207, 200, 0.22) !important;
        border-radius: 24px;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    }
    #chat-panel .panel-close { color: #ffffff; top: 14px; right: 16px; }
}
.chat-header {
    background: transparent;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(143, 207, 200, 0.2);
    border-radius: 0;
    box-shadow: none;
}
.chat-header-icon { width: 48px; height: 48px; }
.chat-header .panel-title { color: #ffffff; font-size: 22px; }
.chat-header .panel-subtitle { color: rgba(228, 241, 240, 0.7); opacity: 1; }
.chat-msg { font-size: 14px; border-radius: 16px; }
.chat-msg-assistant { background: rgba(244, 249, 248, 0.94); border-bottom-left-radius: 6px; }
.chat-msg-user { background: var(--lr-teal); border-bottom-right-radius: 6px; }
.chat-input { font-family: var(--lr-text); }
.chat-send-btn { background: var(--lr-teal) !important; color: #fff !important; }
.chat-disclaimer { color: rgba(228, 241, 240, 0.7); opacity: 1; }

/* ---- About page ---- */
.about-scroll { max-width: 860px; }
.about-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-teal);
    margin-bottom: 10px;
}
.about-lede {
    font-family: var(--lr-display);
    font-size: 22px;
    line-height: 1.45;
    color: var(--lr-ink);
    max-width: 38ch;
    margin: 14px 0 40px;
}
.about-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.about-step, .about-card {
    background: var(--lr-card);
    border: 1px solid var(--lr-card-border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--lr-shadow);
}
.about-step-num {
    font-family: var(--lr-display);
    font-size: 15px;
    color: var(--lr-teal);
}
.about-step h3, .about-card h3 {
    font-family: var(--lr-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--lr-ink);
    margin: 8px 0 8px;
}
.about-step p, .about-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--lr-ink-soft);
}
.about-card { margin-bottom: 16px; }
.about-meta {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(36, 66, 63, 0.12);
    font-size: 14px;
    color: var(--lr-ink);
}
.about-meta span {
    display: inline-block;
    min-width: 96px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lr-ink-soft);
}
.about-meta a { color: var(--lr-teal); }
#about-page .panel-close {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(36, 66, 63, 0.12);
    font-size: 22px;
    cursor: pointer;
    z-index: 5;
}

/* ---- Island memory card ---- */
.island-widget {
    background: rgba(251, 250, 245, 0.97);
    border: 1px solid rgba(36, 66, 63, 0.08);
    box-shadow: 0 18px 48px rgba(36, 66, 63, 0.22);
    border-radius: 20px;
}
.island-widget-title { font-size: 22px; }

@media (max-width: 768px) {
    .about-steps { grid-template-columns: 1fr; }
    .about-lede { font-size: 19px; }
    .journal-page-title { font-size: 34px; }
    #month-title { font-size: 28px; }
    /* On phones the guide card sits under the page title, so it never
       covers the bottom nav or the Talk to a fish button. */
    .guide-bar { top: 252px; bottom: auto; width: calc(100vw - 32px); transform: translate(-50%, -12px); }
    .guide-bar.visible { transform: translate(-50%, 0); }
    .talk-to-fish-btn { bottom: 110px; right: 16px; }
    #about-page .panel-close { top: 16px; right: 16px; }
}

/* Hide the Talk to a fish button while the chat is open */
body:has(#chat-panel:not(.hidden)) .talk-to-fish-btn { opacity: 0; pointer-events: none; }


/* ==========================================================================
   Real-time sky + cinematic layer (atmosphere.js)
   ========================================================================== */
#start-overlay {
    background: linear-gradient(to bottom, var(--sky-top, #d9eeec), var(--sky-bottom, #d9eeec));
    transition: opacity 2s ease, background 1.5s ease;
}
body.sky-dark .brand h1 { color: #eaf6f4; }
body.sky-dark .brand p, body.sky-dark .cube-hint { color: rgba(234, 246, 244, 0.75); }
body { background-color: var(--sky-bottom, #d9eeec); }

#sky-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%);
}
#sky-stars {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    border-radius: 50%;
    transition: opacity 3s ease;
    animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { filter: brightness(0.8); } to { filter: brightness(1.25); } }
#sky-orb {
    position: absolute;
    width: 38vmin; height: 38vmin;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 246, 225, 0.95) 0%, rgba(255, 222, 170, 0.45) 14%, rgba(255, 210, 160, 0.12) 38%, transparent 68%);
    mix-blend-mode: screen;
    transition: left 3s ease, top 3s ease;
}
#sky-orb.moon {
    width: 26vmin; height: 26vmin;
    background: radial-gradient(circle, rgba(236, 244, 255, 0.95) 0%, rgba(200, 222, 255, 0.35) 12%, rgba(170, 200, 240, 0.1) 35%, transparent 65%);
}

/* Giant word naming the time of day, laid over the scene like a film title */
#sky-word {
    position: absolute;
    left: 50%;
    bottom: 3vh;
    transform: translate(-50%, 20px);
    z-index: 2;
    pointer-events: none;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(96px, 19vw, 320px);
    line-height: 0.8;
    letter-spacing: -0.045em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 1.6s ease, transform 1.6s ease;
}
#sky-word.show { opacity: 1; transform: translate(-50%, 0); }
body.sky-dark #sky-word { color: rgba(200, 245, 238, 0.14); }

/* Live sky caption under the reef title */
#sky-caption {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
body.sky-dark #ui-layer { color: #ffffff; }
body.sky-dark #ui-layer #status-text {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Scroll-to-dive cue */
#dive-cue {
    position: fixed;
    left: 32px;
    bottom: 32px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    color: var(--lr-ink, #24423f);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
body.sky-dark #dive-cue { color: rgba(255, 255, 255, 0.85); }
#dive-cue.show { opacity: 0.9; }
#dive-cue i {
    display: block;
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, transparent, currentColor, transparent);
    background-size: 100% 200%;
    animation: dive-line 1.8s ease-in-out infinite;
}
@keyframes dive-line { from { background-position: 0 -100%; } to { background-position: 0 100%; } }

@media (max-width: 768px) {
    #sky-word { bottom: 170px; font-size: 27vw; }
    #dive-cue { left: 50%; transform: translateX(-50%); bottom: 104px; }
    #dive-cue span { font-size: 0; }
    #dive-cue span::after { content: 'Swipe up to dive'; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    #sky-stars, #dive-cue i { animation: none; }
}

/* ==========================================================================
   Immersive pass 2: shared editorial type system, entry gate, sound,
   aquarium window, About scroll story, journal motion.
   Type: Fraunces (display) · Inter (text) · IBM Plex Mono (small print)
   ========================================================================== */
:root { --lr-mono: 'IBM Plex Mono', ui-monospace, monospace; }
.mono { font-family: var(--lr-mono); letter-spacing: 0.01em; }

/* Mixed display headline: big uppercase serif with one italic lowercase word */
.display-mix {
    font-family: var(--lr-display);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.95;
}
.display-mix em {
    font-style: italic;
    text-transform: none;
    font-weight: 300;
    letter-spacing: -0.01em;
}
.section-tag {
    display: inline-block;
    font-family: var(--lr-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(31, 138, 128, 0.12);
    color: var(--lr-teal);
    margin-bottom: 18px;
}

/* ---- Entry gate ---- */
.enter-choices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.enter-choices.gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
.enter-btn {
    font-family: var(--lr-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.enter-btn-primary {
    padding: 14px 26px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f8a80, #2a6f9e);
    box-shadow: 0 10px 30px rgba(31, 138, 128, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.enter-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(31, 138, 128, 0.45); }
.enter-btn-quiet {
    background: none;
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}
body.sky-dark .enter-btn-quiet { color: #eaf6f4; }
.cube-hint { margin-top: -10px; }

/* ---- Sound toggle: four little equaliser bars ---- */
.sound-toggle {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 210;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.sound-toggle.visible { display: flex; }
body.sky-dark .sound-toggle, body.in-aquarium .sound-toggle { background: rgba(10, 30, 45, 0.5); border-color: rgba(255,255,255,0.2); }
.sound-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i {
    width: 2px; height: 100%;
    border-radius: 2px;
    background: var(--lr-ink);
    animation: eq 1s ease-in-out infinite;
}
body.sky-dark .sound-bars i, body.in-aquarium .sound-bars i { background: #ffffff; }
.sound-bars i:nth-child(2) { animation-delay: -0.3s; }
.sound-bars i:nth-child(3) { animation-delay: -0.6s; }
.sound-bars i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.sound-toggle.is-muted .sound-bars i { animation: none; transform: scaleY(0.2); }

/* ---- Aquarium window overlay ---- */
#aquarium-overlay {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
body.in-aquarium #aquarium-overlay { opacity: 1; }
.aq-sheen {
    position: absolute;
    inset: 14px;
    border-radius: 34px;
    /* the dark gallery wall around the acrylic panel */
    box-shadow: 0 0 0 100vmax #020b16, inset 0 0 90px rgba(0, 12, 30, 0.75), inset 0 0 0 1px rgba(160, 220, 255, 0.18);
    background: linear-gradient(115deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.04) 70%, rgba(255,255,255,0) 78%);
}
.aq-visitors {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 16vh;
    opacity: 0.92;
}
body.in-aquarium #ui-layer { color: #ffffff; }
body.in-aquarium #ui-layer #sky-caption { display: none; }
body.in-aquarium #month-title { font-size: 40px; }
@media (max-width: 768px) {
    .aq-sheen { inset: 8px; border-radius: 22px; }
    .aq-visitors { height: 11vh; bottom: 90px; }
    body.in-aquarium #month-title { font-size: 30px; }
    .sound-toggle { top: 16px; right: 16px; }
}

/* ---- About: dark scroll story ---- */
#about-page.about-immersive {
    background: radial-gradient(120% 80% at 70% 20%, #0f3c63 0%, #061a31 55%, #030c1a 100%);
    color: #e6f4ff;
}
#about-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
.about-story { position: relative; z-index: 1; }
.about-chapter {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 8vw 80px;
    max-width: 760px;
    opacity: 0.25;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.about-chapter.in-view { opacity: 1; transform: none; }
.about-chapter h1, .about-chapter h2 {
    font-size: clamp(44px, 6.4vw, 92px);
    color: #ffffff;
    margin: 0 0 26px;
}
.about-chapter h1 em, .about-chapter h2 em { color: #8ff7ea; }
.about-chapter p.mono {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(230, 244, 255, 0.78);
    max-width: 46ch;
    text-transform: none;
}
#about-page .section-tag { background: rgba(143, 247, 234, 0.12); color: #8ff7ea; align-self: flex-start; }
.about-scroll-hint { margin-top: 40px; opacity: 0.6; animation: hint-bob 2s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(6px); } }
#about-page .about-meta {
    border-top: 1px solid rgba(230, 244, 255, 0.15);
    color: rgba(230, 244, 255, 0.85);
    font-size: 13px;
    margin-top: 30px;
}
#about-page .about-meta span { color: rgba(143, 247, 234, 0.8); }
#about-page .about-meta a { color: #8ff7ea; }
#about-page .panel-close {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #ffffff;
}
.about-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 4;
    background: rgba(255,255,255,0.08);
}
.about-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8ff7ea, #5aa8ff, #f6a6c8);
    transform-origin: left;
    transform: scaleX(0);
}
@media (max-width: 768px) {
    .about-chapter { padding: 110px 22px 140px; justify-content: flex-end; }
    .about-chapter h1, .about-chapter h2 { font-size: 42px; }
}

/* ---- Journal: editorial headline + gentle motion ---- */
#journal-page .journal-page-title.display-mix {
    font-size: clamp(44px, 6vw, 84px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    margin-bottom: 18px;
}
#journal-page .journal-page-title.display-mix em { color: var(--lr-teal); }
#journal-page .journal-page-subtitle.mono { font-size: 13.5px; max-width: 52ch; line-height: 1.7; }
/* Slow caustic light drifting across the page, like sun through water */
#journal-page::before {
    content: '';
    position: fixed;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(28% 22% at 20% 30%, rgba(255,255,255,0.35), transparent 70%),
        radial-gradient(22% 18% at 75% 20%, rgba(143,207,200,0.35), transparent 70%),
        radial-gradient(30% 26% at 60% 80%, rgba(255,255,255,0.25), transparent 70%);
    animation: caustics 18s ease-in-out infinite alternate;
    z-index: 0;
}
#journal-page .journal-scroll { position: relative; z-index: 1; }
@keyframes caustics { to { transform: translate(6%, -4%) rotate(8deg) scale(1.08); } }
.journal-page .journal-entry { animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.journal-page .journal-entry:nth-child(2) { animation-delay: 0.06s; }
.journal-page .journal-entry:nth-child(3) { animation-delay: 0.12s; }
.journal-page .journal-entry:nth-child(4) { animation-delay: 0.18s; }
.journal-page .journal-entry:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
.journal-top-row .journal-calendar, .journal-notebook { animation: rise-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.journal-notebook { animation-delay: 0.08s; }
.journal-notebook:focus-within { box-shadow: 0 18px 50px rgba(36, 66, 63, 0.2); transform: translateY(-2px); transition: all 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
    #journal-page::before, .sound-bars i, .about-scroll-hint { animation: none; }
    .about-chapter { opacity: 1; transform: none; }
}

/* ==========================================================================
   Pastel pass: one gradient world, one grid, one nav
   ========================================================================== */
:root {
    --gutter: clamp(20px, 4.5vw, 64px);
    --pastel-bg: linear-gradient(160deg, #f1edff 0%, #e2f4f1 48%, #fde9e3 100%);
}

/* ---- Grid: everything hangs off the same left gutter ---- */
.top-nav { left: var(--gutter) !important; top: 22px !important; }
#ui-layer { left: var(--gutter) !important; top: 104px !important; }
.sound-toggle { right: var(--gutter); top: 22px; }
@media (min-width: 769px) { #dive-cue { left: var(--gutter); bottom: 36px; } }
.journal-scroll { margin: 0 0 0 var(--gutter) !important; max-width: min(1080px, calc(100vw - var(--gutter) * 2)) !important; padding: 132px 0 150px !important; }
.about-chapter { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
#about-page .panel-close { top: 22px; right: var(--gutter); }

/* ---- Nav: one floating pill, bottom centre, on every screen size ---- */
.side-nav {
    top: auto !important;
    bottom: 22px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 16px 40px rgba(88, 90, 150, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transform: translate(-50%, 24px) !important;
}
.side-nav.visible { transform: translate(-50%, 0) !important; }
.side-nav .nav-links {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 2px !important;
    padding: 0 !important;
    width: auto !important;
    justify-content: center;
}
.side-nav .nav-links li { list-style: none; }
.side-nav .nav-links button[data-nav] {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    height: 46px;
    width: auto !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--lr-ink-soft) !important;
    font-family: var(--lr-text);
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) !important;
}
.side-nav .nav-links button[data-nav] svg { width: 19px; height: 19px; stroke: currentColor; }
.side-nav .nav-links button[data-nav] span { font-size: 13.5px !important; font-weight: 600; letter-spacing: 0; margin: 0 !important; }
.side-nav .nav-links button[data-nav]:hover { color: var(--lr-ink) !important; }
.side-nav .nav-links button[data-nav].active { color: #ffffff !important; }
.side-nav .nav-links button[data-nav].active svg { stroke: #ffffff; }
.nav-indicator {
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #7cc6bd 0%, #9d8fe0 55%, #f0a3b4 100%);
    box-shadow: 0 8px 22px rgba(157, 143, 224, 0.4);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15), width 0.45s ease, height 0.45s ease, opacity 0.3s ease;
    pointer-events: none;
}
/* The orb: opens the fish chat from anywhere */
.nav-orb-li { padding: 0 6px; }
.nav-orb {
    position: relative;
    z-index: 1;
    width: 52px; height: 52px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.nav-orb .orb {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    overflow: hidden;
    background: conic-gradient(from 0deg, #9fe3d8, #c4aef2, #ffbfd0, #ffe0a8, #9fe3d8);
    animation: orb-spin 7s linear infinite;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 8px 26px rgba(196, 174, 242, 0.6);
}
.nav-orb .orb i {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, rgba(255,255,255,0.6) 35%, rgba(255,255,255,0) 70%);
    filter: blur(1px);
}
.nav-orb::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 174, 242, 0.6);
    animation: orb-pulse 2.6s ease-out infinite;
}
.nav-orb.open .orb { animation-duration: 2s; }
.nav-orb:hover { transform: scale(1.08); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.talk-to-fish-btn { display: none !important; } /* the orb replaces it */

@media (max-width: 768px) {
    .side-nav { bottom: 14px !important; width: calc(100vw - 24px) !important; }
    .side-nav .nav-links { justify-content: space-between; width: 100% !important; }
    .side-nav .nav-links button[data-nav] { flex-direction: column !important; gap: 3px; height: 54px; padding: 0 10px !important; }
    .side-nav .nav-links button[data-nav] span { font-size: 10.5px !important; }
    .nav-orb { width: 56px; height: 56px; margin-top: -18px; }
}

/* ---- Guide card sits above the nav on desktop ---- */
@media (min-width: 769px) {
    .guide-bar { bottom: 100px; }
    #chat-panel { right: var(--gutter) !important; top: 88px !important; bottom: 96px !important; }
}

/* ---- Chat: frosted pastel glass ---- */
#chat-panel .chat-panel-box {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 24px 60px rgba(88, 90, 150, 0.22) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}
#chat-panel .chat-header { border-bottom-color: rgba(88, 90, 150, 0.12); }
#chat-panel .chat-header .panel-title { color: var(--lr-ink); }
#chat-panel .chat-header .panel-subtitle, #chat-panel .chat-disclaimer { color: var(--lr-ink-soft); }
#chat-panel .panel-close { color: var(--lr-ink) !important; text-shadow: none !important; }
#chat-panel .chat-msg-assistant { background: #ffffff; box-shadow: 0 4px 14px rgba(88, 90, 150, 0.1); }
#chat-panel .chat-msg-user { background: linear-gradient(135deg, #7cc6bd, #9d8fe0); }
#chat-panel .chat-send-btn { background: linear-gradient(135deg, #7cc6bd, #9d8fe0) !important; }
@media (max-width: 768px) {
    #chat-panel { background: rgba(241, 237, 255, 0.92) !important; }
    #chat-panel .chat-panel-box { background: transparent !important; box-shadow: none !important; border: none !important; }
}

/* ---- Aquarium: a pale gallery wall around a pastel window ---- */
body.in-aquarium #ui-layer { color: var(--lr-ink); text-shadow: none; }
body.in-aquarium #ui-layer #status-text { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.95); color: var(--lr-ink); }
.aq-sheen {
    box-shadow: 0 0 0 100vmax #f3f1fb, inset 0 0 70px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
    background: linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.12) 71%, rgba(255,255,255,0) 79%) !important;
}
.aq-label {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(36, 66, 63, 0.55);
}
body.in-aquarium .sound-toggle { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.9); }
body.in-aquarium .sound-bars i { background: var(--lr-ink); }
@media (max-width: 768px) { .aq-label { bottom: 104px; } }

/* ---- About: pastel gradient ---- */
#about-page.about-immersive { background: var(--pastel-bg); color: var(--lr-ink); }
.about-chapter h1, .about-chapter h2 { color: var(--lr-ink); }
.about-chapter h1 em, .about-chapter h2 em { color: #7d6fd6; }
.about-chapter p.mono { color: var(--lr-ink-soft); }
#about-page .section-tag { background: rgba(125, 111, 214, 0.12); color: #6f62c9; }
#about-page .about-meta { border-top-color: rgba(36, 66, 63, 0.14); color: var(--lr-ink); }
#about-page .about-meta span { color: #6f62c9; }
#about-page .about-meta a { color: var(--lr-teal); }
#about-page .panel-close { background: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.95); color: var(--lr-ink); }
.about-progress { background: rgba(36, 66, 63, 0.08); }
.about-progress i { background: linear-gradient(90deg, #7cc6bd, #9d8fe0, #f0a3b4); }

/* ---- Journal: same gradient family ---- */
#journal-page { background: var(--pastel-bg) !important; }
#journal-page .journal-page-title.display-mix em { color: #7d6fd6; }
#journal-page .section-tag { background: rgba(125, 111, 214, 0.12); color: #6f62c9; }
.journal-page .journal-entry { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.journal-page .journal-entry::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 174, 242, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.journal-page .journal-entry:hover::after { opacity: 1; }
.cal-day.is-selected { background: linear-gradient(135deg, #7cc6bd, #9d8fe0) !important; }
.notebook-save-btn { background: linear-gradient(135deg, #5fb3a9, #8a7bd8) !important; }

/* ---- Pages open as a circle from the button you pressed ---- */
.journal-page.reveal-in { animation: page-open 0.9s cubic-bezier(0.7, 0, 0.2, 1) both; }
@keyframes page-open {
    from { clip-path: circle(0px at var(--ox, 50%) var(--oy, 90%)); }
    to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 90%)); }
}
/* Headline words rise in once the page has opened */
.display-mix .w { display: inline-block; }
.journal-page.reveal-in .display-mix .w,
.about-chapter.in-view .display-mix .w {
    animation: word-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.35s + var(--i) * 0.06s);
}
@keyframes word-up { from { opacity: 0; transform: translateY(0.6em) rotate(2deg); filter: blur(6px); } }

/* ---- Bubble cursor ---- */
#cursor { display: none; }
body.has-cursor #cursor { display: block; }
body.has-cursor, body.has-cursor * { cursor: none !important; }
.cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; }
.cursor-dot {
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #7d6fd6;
}
.cursor-ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 1.5px solid rgba(125, 111, 214, 0.55);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.08) 60%);
    display: flex; align-items: center; justify-content: center;
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
#cursor.is-hover .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(125, 111, 214, 0.8); background: rgba(196, 174, 242, 0.18); }
#cursor.is-water .cursor-ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
#cursor.is-down .cursor-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cursor-label {
    font-family: var(--lr-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b4fb8;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#cursor.is-water .cursor-label, #cursor.is-hover .cursor-label:not(:empty) { opacity: 1; }

/* ---- Tap ripple ---- */
.water-ripple {
    position: fixed;
    z-index: 4;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    pointer-events: none;
    animation: ripple 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.water-ripple::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 174, 242, 0.8);
    animation: ripple 1.3s 0.15s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes ripple { to { transform: scale(14); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .journal-page.reveal-in, .display-mix .w, .nav-orb .orb, .nav-orb::after { animation: none !important; }
}

@media (max-width: 768px) {
    body:has(#chat-panel:not(.hidden)) .sound-toggle { display: none; }
}

/* ==========================================================================
   Nav v3: bottom capsule + full-screen index menu
   ========================================================================== */
/* The old vertical/pill nav rules are overridden here */
.top-nav {
    position: fixed !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 22px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 260 !important;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-nav.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nav-capsule {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 36px rgba(88, 90, 150, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.menu-toggle {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(36, 66, 63, 0.06);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.menu-toggle:hover { background: rgba(125, 111, 214, 0.14); }
.menu-toggle span {
    position: absolute;
    left: 14px; right: 14px;
    height: 1.6px;
    border-radius: 2px;
    background: var(--lr-ink);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), top 0.4s ease;
}
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 26px; }
body.menu-open .menu-toggle span:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { top: 22.5px; transform: rotate(-45deg); }
.capsule-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 116px;
    padding: 0 10px;
    line-height: 1.15;
}
.capsule-brand {
    font-family: var(--lr-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lr-ink-soft);
}
.capsule-section {
    font-family: var(--lr-display);
    font-size: 19px;
    font-style: italic;
    color: var(--lr-ink);
}
.capsule-section.swap { animation: label-swap 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes label-swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.nav-capsule .nav-orb { width: 46px; height: 46px; margin: 0; }

/* Full-screen index */
#menu {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    transform: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--pastel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 250 !important;
    display: flex;
    align-items: center;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    clip-path: circle(0px at 50% calc(100% - 50px));
    transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s ease, visibility 0s linear 0.8s !important;
}
body.menu-open #menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    clip-path: circle(150vmax at 50% calc(100% - 50px));
    transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s ease, visibility 0s !important;
}
.menu-inner { width: 100%; padding: 0 var(--gutter); }
.menu-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6f62c9;
    margin-bottom: 22px;
}
#menu .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
}
#menu .nav-links li { border-top: 1px solid rgba(36, 66, 63, 0.12); list-style: none; }
#menu .nav-links li:last-child { border-bottom: 1px solid rgba(36, 66, 63, 0.12); }
#menu .nav-links button[data-nav] {
    display: grid !important;
    grid-template-columns: 64px 1fr auto;
    align-items: baseline;
    width: 100% !important;
    height: auto !important;
    padding: 18px 0 !important;
    gap: 0;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--lr-ink) !important;
    text-align: left;
    cursor: pointer;
    transform: none !important;
    transition: opacity 0.35s ease, padding 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#menu .nav-links button[data-nav] svg { display: none !important; }
#menu .nav-links button[data-nav] .menu-name { font-size: clamp(44px, 8vw, 104px) !important; }
@media (max-width: 768px) { #menu .nav-links button[data-nav] .menu-name { font-size: 46px !important; } }
#menu .menu-num { font-style: normal; font-size: 12px; color: #6f62c9; }
#menu .menu-name {
    font-family: var(--lr-display) !important;
    font-weight: 300 !important;
    font-size: clamp(44px, 8vw, 104px) !important;
    line-height: 0.95;
    letter-spacing: -0.03em !important;
    text-transform: uppercase;
    color: var(--lr-ink);
    transition: color 0.3s ease;
}
#menu .menu-desc { font-size: 12.5px; color: var(--lr-ink-soft); text-align: right; max-width: 24ch; }
#menu.has-hover .nav-links button[data-nav]:not(:hover) { opacity: 0.35; }
#menu .nav-links button[data-nav]:hover { padding-left: 18px !important; }
#menu .nav-links button[data-nav]:hover #menu .menu-name { font-style: italic; text-transform: none; color: #6f62c9; }
#menu .nav-links button[data-nav].active .menu-name::after {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 16px;
    vertical-align: middle;
    border-radius: 50%;
    background: linear-gradient(135deg, #7cc6bd, #9d8fe0, #f0a3b4);
}
#menu .nav-links button[data-nav].active { color: var(--lr-ink) !important; }
/* Items slide up in sequence when the menu opens */
#menu .nav-links li { transform: translateY(24px); opacity: 0; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; }
body.menu-open #menu .nav-links li { transform: none; opacity: 1; }
body.menu-open #menu .nav-links li:nth-child(1) { transition-delay: 0.25s; }
body.menu-open #menu .nav-links li:nth-child(2) { transition-delay: 0.31s; }
body.menu-open #menu .nav-links li:nth-child(3) { transition-delay: 0.37s; }
body.menu-open #menu .nav-links li:nth-child(4) { transition-delay: 0.43s; }
.menu-foot {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    font-size: 12px;
    color: var(--lr-ink-soft);
}
.menu-foot a { color: #6f62c9; text-decoration: none; }
body.menu-open .guide-bar, body.menu-open #ui-layer, body.menu-open #dive-cue { opacity: 0 !important; }

@media (max-width: 768px) {
    .top-nav { bottom: 14px !important; }
    #menu .nav-links button[data-nav] { grid-template-columns: 40px 1fr; padding: 14px 0 !important; }
    #menu .menu-desc { grid-column: 2; text-align: left; margin-top: 6px; }
    #menu .menu-name { font-size: 46px !important; }
    .menu-foot { flex-direction: column; gap: 8px; }
}

/* Hide the previous nav's leftovers */
.top-nav .nav-logo, .nav-indicator { display: none !important; }

/* ==========================================================================
   Dive: push in + soft blur, then a pastel veil (no black, no cut edges)
   ========================================================================== */
#scene-fade { background: linear-gradient(180deg, #eef2fb 0%, #dcecee 48%, #ece3f3 100%) !important; }
#canvas-container canvas { transition: filter 0.9s ease; }
body.diving #canvas-container canvas { filter: blur(8px) saturate(0.85); }

/* ==========================================================================
   Aquarium: particle edition, same language as About
   ========================================================================== */
.aq-sheen { display: none !important; }
body.in-aquarium #ui-layer { color: var(--lr-ink); }
.tank-bubble-tooltip {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--lr-ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    font-family: var(--lr-mono) !important;
}

/* Layout: title block now starts near the top since the logo moved into the capsule */
#ui-layer { top: 40px !important; }
@media (max-width: 768px) { #ui-layer { top: 28px !important; } .guide-bar { top: 170px !important; } }
@media (min-width: 769px) { .guide-bar { bottom: 96px !important; } }

/* The reef's sun/stars layer isn't part of the aquarium */
body.in-aquarium #sky-layer, body.in-aquarium #sky-word { opacity: 0 !important; }

/* ==========================================================================
   Chat v2: a calm pastel conversation card
   ========================================================================== */
#chat-panel { z-index: 240 !important; }
body:has(#chat-panel:not(.hidden)) .sound-toggle { display: none !important; }
@media (min-width: 769px) {
    #chat-panel {
        top: 24px !important;
        bottom: 96px !important;
        right: var(--gutter) !important;
        width: min(420px, 42vw) !important;
        height: auto !important;
    }
}
#chat-panel .chat-panel-box {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100%;
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden;
    background: linear-gradient(170deg, rgba(255,255,255,0.86) 0%, rgba(246,243,255,0.84) 55%, rgba(253,240,236,0.84) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 30px 70px rgba(88, 90, 150, 0.22), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
#chat-panel .chat-header {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 22px 16px !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(88, 90, 150, 0.1) !important;
    border-radius: 0 !important;
}
.chat-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.chat-avatar .orb {
    position: absolute; inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: conic-gradient(from 0deg, #9fe3d8, #c4aef2, #ffbfd0, #ffe0a8, #9fe3d8);
    animation: orb-spin 7s linear infinite;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 6px 18px rgba(196, 174, 242, 0.5);
}
.chat-avatar .orb i {
    position: absolute; inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, rgba(255,255,255,0.6) 35%, rgba(255,255,255,0) 70%);
}
#chat-panel.is-thinking .chat-avatar .orb { animation-duration: 1.4s; }
.chat-heading { flex: 1; min-width: 0; }
#chat-panel .chat-heading .panel-title {
    font-family: var(--lr-display);
    font-size: 21px !important;
    font-weight: 400;
    color: var(--lr-ink) !important;
    margin: 0 !important;
    line-height: 1.1;
}
.chat-status {
    display: flex; align-items: center; gap: 7px;
    margin: 4px 0 0 !important;
    font-size: 11px;
    color: var(--lr-ink-soft);
}
.chat-status i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #7cc6bd;
    box-shadow: 0 0 0 0 rgba(124, 198, 189, 0.6);
    animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse { 70% { box-shadow: 0 0 0 7px rgba(124, 198, 189, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 198, 189, 0); } }
#chat-panel .chat-close {
    position: static !important;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: rgba(36, 66, 63, 0.06) !important;
    color: var(--lr-ink) !important;
    font-size: 20px !important;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.3s ease;
}
#chat-panel .chat-close:hover { background: rgba(125, 111, 214, 0.14) !important; transform: rotate(90deg); }

#chat-panel .chat-messages {
    flex: 1 !important;
    overflow-y: auto;
    padding: 20px 22px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 10px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 10px), transparent 100%);
}
#chat-panel .chat-msg {
    max-width: 82% !important;
    padding: 11px 15px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    border-radius: 20px !important;
    animation: msg-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
#chat-panel .chat-msg-assistant {
    background: #ffffff !important;
    color: var(--lr-ink) !important;
    border-bottom-left-radius: 6px !important;
    box-shadow: 0 6px 18px rgba(88, 90, 150, 0.08) !important;
}
#chat-panel .chat-msg-user {
    background: linear-gradient(135deg, #6fbdb3, #9486d6) !important;
    color: #ffffff !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: 0 6px 18px rgba(148, 134, 214, 0.25) !important;
}
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; animation: msg-in 0.5s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.chat-chip {
    font-family: var(--lr-text);
    font-size: 13px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(148, 134, 214, 0.35);
    background: rgba(255, 255, 255, 0.7);
    color: #5b4fb8;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.chat-chip:hover { background: #ffffff; border-color: #9486d6; transform: translateY(-2px); }

#chat-panel .chat-input-row {
    display: flex !important;
    align-items: flex-end;
    gap: 8px;
    margin: 8px 16px 0 !important;
    padding: 6px 6px 6px 16px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid rgba(88, 90, 150, 0.12) !important;
    box-shadow: 0 8px 22px rgba(88, 90, 150, 0.1) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#chat-panel .chat-input-row:focus-within { border-color: rgba(148, 134, 214, 0.55) !important; box-shadow: 0 0 0 4px rgba(148, 134, 214, 0.12), 0 8px 22px rgba(88, 90, 150, 0.1) !important; }
#chat-panel .chat-input {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: none !important;
    font-family: var(--lr-text) !important;
    font-size: 14.5px !important;
    line-height: 1.4;
    color: var(--lr-ink) !important;
}
#chat-panel .chat-input::placeholder { color: rgba(36, 66, 63, 0.4); }
#chat-panel .chat-send-btn {
    width: 40px !important; height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff !important;
    background: linear-gradient(135deg, #6fbdb3, #9486d6) !important;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.2s ease, filter 0.2s ease;
}
#chat-panel .chat-send-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.05); }
#chat-panel .chat-send-btn:disabled { opacity: 0.35; cursor: default; filter: grayscale(0.4); }
#chat-panel .chat-disclaimer {
    margin: 10px 22px 16px !important;
    font-size: 10.5px !important;
    line-height: 1.5;
    color: var(--lr-ink-soft) !important;
    opacity: 0.8 !important;
    text-align: center;
}
#chat-panel .chat-crisis-box { border-radius: 18px; }
@media (max-width: 768px) {
    #chat-panel { inset: 0 !important; width: 100vw !important; height: 100vh !important; background: var(--pastel-bg) !important; }
    #chat-panel .chat-panel-box { border-radius: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; padding: 12px 0 96px !important; }
}

/* ==========================================================================
   Journal v3: overview on the left, the page you write on at the right
   ========================================================================== */
#journal-page .journal-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    max-width: min(1240px, calc(100vw - var(--gutter) * 2)) !important;
    padding: 64px 0 150px !important;
}
.journal-side { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 22px; }
#journal-page .journal-side .journal-page-title.display-mix { font-size: clamp(40px, 4.4vw, 60px) !important; margin: 0 !important; }
#journal-page .journal-side .section-tag { margin-bottom: -6px; align-self: flex-start; }

.journal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.journal-stats > div {
    padding: 14px 12px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(88, 90, 150, 0.08);
}
.journal-stats strong { display: block; font-family: var(--lr-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--lr-ink); }
.journal-stats span { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.3; color: var(--lr-ink-soft); }

.mood-mix-bar {
    display: flex;
    gap: 3px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(36, 66, 63, 0.07);
}
.mood-mix-bar i { display: block; height: 100%; border-radius: 999px; }
.mood-mix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11px; color: var(--lr-ink-soft); }
.mood-mix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mood-mix-legend b { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mood-positive { --mood: #f2a488; } .mood-neutral { --mood: #7cc6bd; } .mood-mixed { --mood: #c995b8; } .mood-negative { --mood: #8fa6cc; } .mood-pending { --mood: #c9c3d9; }
.mood-mix-bar i, .mood-mix-legend b { background: var(--mood); }

#journal-page .journal-side .journal-calendar {
    flex: none !important;
    padding: 16px 16px 12px !important;
    border-radius: 22px !important;
    align-self: stretch !important;
}
#journal-page .journal-side .cal-day { font-size: 12.5px; }

/* The writing card: a clean page, no ruled lines */
#journal-page .write-card {
    display: block !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 24px 60px rgba(88, 90, 150, 0.12) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#journal-page .write-card:focus-within { box-shadow: 0 0 0 4px rgba(148, 134, 214, 0.14), 0 28px 70px rgba(88, 90, 150, 0.16) !important; transform: none; }
#journal-page .write-card .notebook-content { padding: 26px 30px 22px !important; }
.write-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
#journal-page .write-card .notebook-date-header {
    font-family: var(--lr-mono) !important;
    font-style: normal !important;
    font-size: 11.5px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6f62c9 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.write-hint { font-size: 10.5px; color: var(--lr-ink-soft); opacity: 0.8; }
#journal-page .write-card .journal-page-textarea {
    background-image: none !important;
    min-height: 230px !important;
    font-family: var(--lr-display) !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
    color: var(--lr-ink) !important;
    padding: 6px 0 !important;
}
#journal-page .write-card .journal-page-textarea::placeholder { color: rgba(36, 66, 63, 0.3) !important; font-style: italic; }
.write-prompts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.write-prompts > span { font-size: 11px; color: var(--lr-ink-soft); margin-right: 2px; }
.prompt-chip {
    font-family: var(--lr-text);
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(148, 134, 214, 0.5);
    background: rgba(255, 255, 255, 0.6);
    color: #5b4fb8;
    cursor: pointer;
    transition: background 0.2s ease, border-style 0.2s ease, transform 0.2s ease;
}
.prompt-chip:hover { background: #ffffff; border-style: solid; transform: translateY(-1px); }
#journal-page .journal-write-actions {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(88, 90, 150, 0.1);
}
#journal-page .notebook-toolbar { display: flex; align-items: center; gap: 14px; }
.write-count { font-size: 11px; color: var(--lr-ink-soft); }
#journal-page .notebook-save-btn { padding: 11px 22px !important; border-radius: 999px !important; font-size: 14px !important; }
#journal-page .notebook-save-btn span { display: inline-block; transition: transform 0.25s ease; }
#journal-page .notebook-save-btn:hover span { transform: translateX(3px); }

/* Your days: a timeline */
.days-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 18px; }
.days-head h2.display-mix { font-size: clamp(30px, 3.2vw, 44px); color: var(--lr-ink); margin: 0; }
.days-head h2.display-mix em { color: #7d6fd6; }
.days-head .mono { font-size: 11.5px; color: var(--lr-ink-soft); }
#journal-page .timeline { gap: 0 !important; }
#journal-page .timeline .journal-entry {
    display: grid !important;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible;
}
#journal-page .timeline .journal-entry::after { display: none; }
.entry-rail { position: relative; display: flex; justify-content: center; }
.entry-rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(125, 111, 214, 0.2); }
.journal-entry:first-child .entry-rail::before { top: 22px; }
.journal-entry:last-child .entry-rail::before { bottom: calc(100% - 26px); }
.entry-dot {
    position: relative;
    margin-top: 20px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--mood);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 0 5px color-mix(in srgb, var(--mood) 40%, transparent);
}
.entry-body {
    margin-bottom: 14px;
    padding: 16px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(88, 90, 150, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.journal-entry:hover .entry-body { transform: translateX(4px); box-shadow: 0 12px 30px rgba(88, 90, 150, 0.12); }
#journal-page .timeline .journal-entry-date { font-size: 11px !important; letter-spacing: 0.08em; color: var(--lr-ink-soft) !important; text-transform: uppercase; margin-bottom: 8px; }
#journal-page .timeline .journal-entry-text { font-family: var(--lr-display); font-size: 17.5px !important; line-height: 1.55; color: var(--lr-ink); }
.entry-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 11px; color: var(--lr-ink-soft); }
.mood-tag { padding: 3px 9px; border-radius: 999px; color: var(--lr-ink); background: color-mix(in srgb, var(--mood) 28%, white); }
#journal-page .journal-empty {
    display: flex; flex-direction: column; gap: 6px;
    padding: 28px;
    border-radius: 22px;
    border: 1.5px dashed rgba(148, 134, 214, 0.35);
    text-align: left !important;
    background: rgba(255,255,255,0.35);
}
#journal-page .journal-empty strong { font-family: var(--lr-display); font-weight: 400; font-size: 20px; color: var(--lr-ink); }
#journal-page .journal-empty span { font-size: 12px; color: var(--lr-ink-soft); }
#journal-page .journal-top-row { display: contents; }
@media (max-width: 900px) {
    #journal-page .journal-layout { grid-template-columns: 1fr; padding-top: 40px !important; }
    .journal-side { position: static; }
    #journal-page .write-card .journal-page-textarea { font-size: 19px !important; min-height: 180px !important; }
    #journal-page .write-card .notebook-content { padding: 20px 18px 16px !important; }
    .write-hint { display: none; }
}

/* ==========================================================================
   Floating tips (guide.js)
   ========================================================================== */
#guide-bar { display: none !important; }
#tip-layer { position: fixed; inset: 0; z-index: 320; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
#tip-layer.visible { opacity: 1; }
#tip-layer.visible .tip-card { pointer-events: auto; }
.tip-card {
    position: fixed;
    width: min(300px, calc(100vw - 32px));
    padding: 16px 18px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 18px 44px rgba(88, 90, 150, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: tip-float 3.2s ease-in-out infinite;
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1), top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tip-card::after { /* little pointer toward the target */
    content: '';
    position: absolute;
    left: calc(var(--arrow-x, 50%) - 8px);
    bottom: -8px;
    width: 16px; height: 16px;
    background: inherit;
    border-right: 1px solid #fff; border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
}
.tip-card.below::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.tip-card.pop { animation: tip-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1), tip-float 3.2s 0.5s ease-in-out infinite; }
@keyframes tip-float { 50% { translate: 0 -5px; } }
@keyframes tip-pop { from { opacity: 0; transform: scale(0.94) translateY(8px); } }
.tip-step { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f62c9; margin-bottom: 6px; }
.tip-text { font-size: 15px; line-height: 1.5; color: var(--lr-ink); margin: 0 0 12px; }
.tip-text b { font-weight: 600; background: linear-gradient(transparent 60%, rgba(196, 174, 242, 0.45) 60%); }
.tip-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.tip-actions button { font-family: var(--lr-text); font-size: 13px; font-weight: 600; border: none; cursor: pointer; border-radius: 999px; }
.tip-skip { background: none; color: var(--lr-ink-soft); padding: 8px 10px; }
.tip-next { padding: 8px 16px; color: #fff; background: linear-gradient(135deg, #6fbdb3, #9486d6); box-shadow: 0 6px 16px rgba(148, 134, 214, 0.35); }
.tip-ring {
    position: fixed;
    border-radius: 50%;
    border: 2px solid rgba(148, 134, 214, 0.7);
    box-shadow: 0 0 0 6px rgba(196, 174, 242, 0.18);
    animation: ring-pulse 1.8s ease-out infinite;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tip-ring.is-big { border-radius: 28px; animation: none; border-style: dashed; }
@keyframes ring-pulse { 0% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
/* gesture hints drawn at the target */
.tip-gesture { position: fixed; width: 0; height: 0; }
.tip-gesture.g-drag::before, .tip-gesture.g-tap::before, .tip-gesture.g-scroll::before {
    content: '';
    position: absolute;
    left: -14px; top: -14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0 35%, rgba(148, 134, 214, 0.6) 36% 100%);
    box-shadow: 0 6px 16px rgba(88, 90, 150, 0.25);
}
.tip-gesture.g-drag::before { animation: g-drag 2.2s ease-in-out infinite; }
.tip-gesture.g-drag::after {
    content: '←  drag  →';
    position: absolute;
    left: -60px; top: 26px;
    width: 120px; text-align: center;
    font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.1em; color: #5b4fb8;
}
.tip-gesture.g-tap::before { animation: g-tap 1.6s ease-in-out infinite; }
.tip-gesture.g-scroll::before { animation: g-scroll 1.8s ease-in-out infinite; }
@keyframes g-drag { 0%, 100% { transform: translateX(-60px); } 50% { transform: translateX(60px); } }
@keyframes g-tap { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.7); } }
@keyframes g-scroll { 0% { transform: translateY(-30px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }

/* "?" replays the tips */
.help-toggle {
    position: fixed;
    top: 22px;
    right: calc(var(--gutter) + 56px);
    z-index: 210;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--lr-display);
    font-size: 19px;
    font-style: italic;
    color: var(--lr-ink);
    cursor: pointer;
    display: none;
    transition: transform 0.25s ease, background 0.2s ease;
}
.help-toggle.visible { display: block; }
.help-toggle:hover { background: #ffffff; transform: translateY(-2px); }
body:has(#chat-panel:not(.hidden)) .help-toggle { display: none; }
@media (max-width: 768px) { .help-toggle { top: 16px; right: 72px; } }
@media (prefers-reduced-motion: reduce) { .tip-card, .tip-ring, .tip-gesture::before { animation: none !important; } }

/* Journal tabs */
.journal-tabs {
    position: relative;
    display: inline-flex;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(88, 90, 150, 0.08);
}
.journal-tab {
    position: relative; z-index: 1;
    padding: 10px 18px;
    border: none; background: none;
    border-radius: 999px;
    font-family: var(--lr-text); font-size: 14px; font-weight: 600;
    color: var(--lr-ink-soft);
    cursor: pointer;
    transition: color 0.3s ease;
}
.journal-tab.active { color: #ffffff; }
.journal-tab-pill {
    position: absolute; top: 4px; left: 4px; bottom: 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6fbdb3, #9486d6);
    box-shadow: 0 6px 16px rgba(148, 134, 214, 0.35);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.1), width 0.35s ease;
}
.tab-count {
    display: inline-block; min-width: 20px;
    margin-left: 6px; padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    background: rgba(148, 134, 214, 0.15);
    color: inherit;
}
.journal-tab.active .tab-count { background: rgba(255, 255, 255, 0.25); }
#journal-page .tab-pane { display: none; }
#journal-page .tab-pane.active { display: block; animation: rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.write-after { margin: 14px 4px 0; font-size: 11.5px; color: var(--lr-ink-soft); }
.link-btn { border: none; background: none; padding: 0; font: inherit; color: #6f62c9; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#journal-page .tab-pane[data-pane="past"] .days-head { margin-top: 0; align-items: flex-end; }
.entry-search {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(88, 90, 150, 0.12);
    color: var(--lr-ink-soft);
    min-width: 220px;
}
.entry-search:focus-within { border-color: rgba(148, 134, 214, 0.55); box-shadow: 0 0 0 4px rgba(148, 134, 214, 0.12); }
.entry-search input { border: none; outline: none; background: none; font-family: var(--lr-text); font-size: 14px; color: var(--lr-ink); width: 100%; }
.month-divider {
    margin: 18px 0 12px 42px;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #6f62c9;
}
.month-divider:first-child { margin-top: 4px; }
.search-empty { margin: 16px 42px; font-size: 12px; color: var(--lr-ink-soft); }
@media (max-width: 900px) {
    .journal-tabs { display: flex; }
    .journal-tab { flex: 1; }
    #journal-page .tab-pane[data-pane="past"] .days-head { flex-direction: column; align-items: stretch; }
    .entry-search { min-width: 0; }
}
#journal-page .journal-side .journal-page-title.display-mix { font-size: clamp(34px, 3.1vw, 46px) !important; }
.days-head h2.display-mix { margin-bottom: 6px !important; line-height: 1.05; }
@media (max-width: 900px) {
    /* phones: headline, then writing, then the overview */
    #journal-page .journal-side { display: contents; }
    #journal-page .journal-side .section-tag { order: 0; }
    #journal-page .journal-side .journal-page-title { order: 1; }
    #journal-page .journal-main { order: 2; }
    #journal-page .journal-stats { order: 3; }
    #journal-page .mood-mix { order: 4; }
    #journal-page .journal-side .journal-calendar { order: 5; }
    #journal-page .journal-layout { gap: 20px; }
}