/* ============================================================
   journal.css — Modern Hipster Game Field Journal Aesthetic
   Pure visual layer — no JS/functional impact whatsoever.
   ============================================================ */

/* ── Google Fonts: Press Start 2P (labels only) + Caveat (titles) ── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Caveat:wght@400;600;700&display=swap');

/* ── CSS Variables — theme-aware ──────────────────────────────────── */
/* Light themes (default / any light daisyUI theme) */
:root,
[data-theme="light"],
[data-theme="cupcake"],
[data-theme="emerald"],
[data-theme="corporate"],
[data-theme="retro"],
[data-theme="cyberpunk"],
[data-theme="valentine"],
[data-theme="garden"],
[data-theme="aqua"],
[data-theme="lofi"],
[data-theme="pastel"],
[data-theme="fantasy"],
[data-theme="wireframe"],
[data-theme="cmyk"],
[data-theme="autumn"],
[data-theme="acid"],
[data-theme="lemonade"],
[data-theme="bumblebee"],
[data-theme="winter"],
[data-theme="nord"] {
    --journal-paper:     #fdf8f0;       /* warm cream */
    --journal-paper-alt: #fef9f2;       /* slightly lighter for collapsed preview */
    --journal-line:      rgba(90, 70, 50, 0.10);   /* tan rule lines */
    --journal-margin:    rgba(220, 40, 60, 0.18);  /* rose margin rule */
    --journal-border:    rgba(180, 140, 100, 0.30);
    --journal-shadow:    0 2px 16px 0 rgba(120, 90, 50, 0.12), 0 1px 3px rgba(0,0,0,0.06);
    --journal-tape:      rgba(251, 207, 160, 0.70); /* washi tape strip */
    --journal-dot:       rgba(150, 110, 70, 0.28);  /* binding-edge dots */
    --journal-stamp-bg:  rgba(30, 30, 30, 0.06);
    --journal-title-color: #3b2a1a;
    --journal-text:      rgba(30, 20, 10, 0.85);
    --journal-muted:     rgba(80, 60, 40, 0.55);
    --journal-rating-filled: #c2410c;   /* burnt-orange hearts */
    --journal-rating-empty:  rgba(100, 80, 60, 0.25);
    --journal-chapter-bg:    rgba(180, 140, 100, 0.12);
}

/* Dark themes */
[data-theme="dark"],
[data-theme="night"],
[data-theme="dracula"],
[data-theme="black"],
[data-theme="luxury"],
[data-theme="halloween"],
[data-theme="forest"],
[data-theme="coffee"],
[data-theme="dim"],
[data-theme="sunset"],
[data-theme="synthwave"],
[data-theme="business"] {
    --journal-paper:     #1e1810;
    --journal-paper-alt: #221c14;
    --journal-line:      rgba(200, 180, 140, 0.09);
    --journal-margin:    rgba(220, 60, 80, 0.20);
    --journal-border:    rgba(160, 130, 90, 0.22);
    --journal-shadow:    0 2px 20px 0 rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0,0,0,0.25);
    --journal-tape:      rgba(160, 110, 60, 0.35);
    --journal-dot:       rgba(180, 150, 100, 0.22);
    --journal-stamp-bg:  rgba(255, 255, 255, 0.06);
    --journal-title-color: #e8dcc8;
    --journal-text:      rgba(230, 215, 185, 0.88);
    --journal-muted:     rgba(200, 180, 140, 0.50);
    --journal-rating-filled: #f97316;
    --journal-rating-empty:  rgba(200, 160, 100, 0.20);
    --journal-chapter-bg:    rgba(200, 160, 100, 0.08);
}

/* ── .journal-binding — adds notebook frills on the left ────────── */
.journal-binding {
    overflow: visible !important;
    position: relative;
}

/* Binding-edge coil dots — left side, purely decorative */
.journal-binding::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 10px;
    border-radius: 6px 0 0 6px;
    /* Repeating punched-hole dots using radial gradient */
    background-image: radial-gradient(circle, var(--journal-dot) 3px, transparent 3px);
    background-size: 10px 28px;
    background-repeat: repeat-y;
    background-position: center 14px;
    pointer-events: none;
    z-index: 1;
}

/* ── .journal-lines — lined-paper body area ──────────────────────── */
.journal-lines {
    position: relative;
    /* Lined paper: horizontal rules every 1.75rem + left margin rule */
    background-image:
        /* Margin rule ~3rem from left */
        linear-gradient(to right, transparent 2.75rem, var(--journal-margin) 2.75rem, var(--journal-margin) calc(2.75rem + 1.5px), transparent calc(2.75rem + 1.5px)),
        /* Horizontal rules */
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent calc(1.75rem - 1px),
            var(--journal-line) calc(1.75rem - 1px),
            var(--journal-line) 1.75rem
        );
    background-color: var(--journal-paper) !important;
    line-height: 1.75rem !important;
    padding: 0.5rem 1rem 0.5rem 3.25rem !important; /* indent past margin rule */
    border-radius: 0.5rem;
    border: 1px solid var(--journal-border) !important;
    color: var(--journal-text) !important;
    font-family: 'Caveat', cursive;
    font-size: 1.05rem !important;
    font-weight: 500;
    white-space: pre-line;
    min-height: 5.25rem; /* at least 3 lines */
    overflow: hidden; /* keep lines aligned */
}

/* ── .journal-title — decorative Caveat title ────────────────────── */
.journal-title {
    font-family: 'Caveat', cursive !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    color: var(--journal-title-color) !important;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* ── .journal-entry-label — pixel / stamp label (Press Start 2P) ─── */
.journal-entry-label {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.48rem !important;   /* tiny — never body text */
    line-height: 1.6 !important;
    letter-spacing: 0.05em;
    color: var(--journal-muted) !important;
    background: var(--journal-stamp-bg);
    border: 1px solid var(--journal-border);
    border-radius: 3px;
    padding: 2px 6px;
    text-transform: uppercase;
}

/* Date stamp variant — slightly larger */
.journal-date-stamp {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.42rem !important;
    line-height: 1.6 !important;
    letter-spacing: 0.03em;
    color: var(--journal-muted) !important;
    text-transform: uppercase;
}

/* ── .journal-star-rating — game-style heart rating ──────────────── */
.journal-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--journal-stamp-bg);
    border: 1px solid var(--journal-border);
    border-radius: 4px;
    padding: 2px 7px 2px 5px;
}

.journal-star-rating .rating-filled {
    color: var(--journal-rating-filled) !important;
    font-size: 0.7rem !important;
}

.journal-star-rating .rating-empty {
    color: var(--journal-rating-empty) !important;
    font-size: 0.7rem !important;
}

.journal-star-rating .rating-score {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.38rem !important;
    color: var(--journal-muted) !important;
    margin-left: 4px;
    line-height: 1;
    align-self: center;
}

/* ── .journal-photo — polaroid-style images with washi-tape corners ─ */
.journal-photo {
    display: inline-block;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 3px;
    padding: 5px 5px 22px 5px; /* bottom gutter for caption space */
    box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.10);
    position: relative;
    overflow: visible;
}

/* 45deg washi-tape strip — top-left corner */
.journal-photo::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    width: 36px;
    height: 14px;
    background: var(--journal-tape);
    transform: rotate(-3deg);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* washi-tape strip — bottom-right corner */
.journal-photo::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 12px;
    width: 36px;
    height: 14px;
    background: var(--journal-tape);
    transform: rotate(2deg);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* Dark-theme photo background */
[data-theme="dark"] .journal-photo,
[data-theme="night"] .journal-photo,
[data-theme="dracula"] .journal-photo,
[data-theme="black"] .journal-photo,
[data-theme="luxury"] .journal-photo,
[data-theme="halloween"] .journal-photo,
[data-theme="forest"] .journal-photo,
[data-theme="coffee"] .journal-photo,
[data-theme="dim"] .journal-photo,
[data-theme="sunset"] .journal-photo,
[data-theme="synthwave"] .journal-photo,
[data-theme="business"] .journal-photo {
    background: #2a2418;
}

/* ── .journal-photo-grid — the wrapper that tilts alternating photos ─ */
.journal-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0;
    align-items: flex-start;
}

/* Alternate slight rotation on photo items */
.journal-photo-grid > *:nth-child(odd) {
    transform: rotate(-1.2deg);
}
.journal-photo-grid > *:nth-child(even) {
    transform: rotate(1.0deg);
}
.journal-photo-grid > *:hover {
    transform: rotate(0deg) scale(1.04);
    z-index: 5;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
}

/* ── .journal-chapter-header — quest-log chapter band ───────────── */
.journal-chapter-header {
    background: var(--journal-chapter-bg) !important;
    border-bottom: 1px solid var(--journal-border) !important;
    padding: 0.45rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.journal-chapter-header .chapter-label {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.45rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--journal-muted) !important;
    line-height: 1.8;
}

/* ── .journal-thread-banner — the collapsible thread card header ─── */
.journal-thread-banner {
    background: linear-gradient(
        to right,
        var(--journal-chapter-bg),
        var(--journal-paper-alt),
        var(--journal-chapter-bg)
    ) !important;
    border-bottom: 1px solid var(--journal-border) !important;
}

/* ── Tweaks for the standalone journal card body area ─────────────── */
.journal-card-body {
    /* Intentionally transparent — inherits bg-base-100 from the standard card shell */
}

/* Description text under title */
.journal-description {
    color: var(--journal-muted) !important;
    font-family: 'Caveat', cursive;
    font-size: 1rem !important;
    line-height: 1.5;
}

/* -- .journal-slideshow --------------------------------------------- */
.journal-slideshow {
    transform: rotate(-1deg);
    transition: transform 0.2s;
    width: 100%;
    max-width: 28rem;
}

.journal-slideshow:hover {
    transform: rotate(0deg) scale(1.02);
    z-index: 5;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.journal-slide {
    transition: opacity 0.8s ease-in-out;
    opacity: 0;
}

.journal-slide.active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .journal-slideshow, .journal-slideshow:hover {
        transition: none;
        transform: rotate(-1deg);
    }
}