/* =========================================================
   MANDATORY — local asset integration (kept exactly as given)
   ========================================================= */
@font-face {
    font-family: 'CustomLocalFont';
    src: url('./fonts/newfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'CustomLocalFont', 'Cairo', 'Traditional Arabic', sans-serif !important;
    font-weight: 700 !important;
}

body {
    background-image: url('./background/bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* =========================================================
   Design system — ink & wax on an ivory page, resting on
   the crumpled paper photo. One accent (oxblood), one metal
   (brass), quiet everywhere else.
   ========================================================= */
:root{
    --page: #f8f2e3;
    --page-deep: #ece2c8;
    --card: #fcf8ec;
    --card-edge: #ddcfa8;
    --ink: #2a2015;
    --ink-heading: #201509;
    --ink-soft: #6b5c46;
    --ink-faint: #a3937a;
    --oxblood: #7a1f2b;
    --oxblood-deep: #591620;
    --brass: #9c7a34;
    --brass-light: #c9a35a;
    --leaf: #47533c;
    --shadow: rgba(32, 21, 9, 0.28);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; font-size: 18px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body{
    margin: 0;
    min-height: 100vh;
    font-size: 1.25rem;
    color: var(--ink);
    background-color: var(--page-deep);
    position: relative;
    overflow-x: hidden;
}
input, textarea, button{ font-size: 1rem; }
:focus-visible{ outline: 2px solid var(--oxblood); outline-offset: 3px; }

.scrim{
    position: fixed;
    inset: 0;
    background: rgba(42, 28, 13, 0.14);
    mix-blend-mode: multiply;
    pointer-events: none;
}

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes appear{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes pageIn{
  from{ opacity: 0; transform: translateY(18px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shake{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ================= Passcode gate (sealed letter) ================= */
.gate{
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.gate.unlocking{ opacity: 0; visibility: hidden; pointer-events: none; }

.gate-card{
    position: relative;
    width: 300px;
    margin-top: 40px;
    background: var(--page);
    border: 1px solid var(--card-edge);
    box-shadow: 0 24px 48px var(--shadow);
    padding: 46px 26px 34px;
    text-align: center;
}
.gate-card::before{
    content: "";
    position: absolute;
    top: -34px; left: 50%;
    margin-left: -150px;
    width: 0; height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 34px solid var(--page);
}
.gate-seal{
    position: absolute;
    top: -13px; right: 50%;
    transform: translateX(50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--oxblood-deep) 0%, var(--oxblood) 65%, var(--oxblood-deep) 100%);
    box-shadow: 0 3px 6px var(--shadow), inset -2px -2px 4px rgba(0,0,0,0.3);
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.gate-seal::after{ content: "❦"; color: #f0dcb0; font-size: 0.8rem; }
.gate-card h1{
    font-size: 1.85rem;
    margin: 10px 0 8px;
    color: var(--ink-heading);
}
.gate-card p.sub{
    margin: 0 0 24px;
    color: var(--ink-soft);
    font-size: 1.22rem;
    line-height: 1.7;
}
.gate-form{ display: flex; flex-direction: column; gap: 14px; }
.gate-form input{
    width: 100%;
    text-align: center;
    letter-spacing: 0.2em;
    font-size: 1.15rem;
    color: var(--ink);
    background: rgba(255,255,255,0.5);
    border: none;
    border-bottom: 1px solid var(--brass);
    border-radius: 0;
    padding: 10px 14px;
}
.gate-form input:focus{ outline: none; border-color: var(--oxblood); background: #fff; }
.gate-form button{
    border: 1px solid var(--oxblood-deep);
    background: var(--oxblood);
    color: #f5eeda;
    font-size: 1rem;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.gate-form button:hover{ background: var(--oxblood-deep); transform: translateY(-1px); }
.gate-error{
    min-height: 20px;
    margin-top: 2px;
    font-size: 0.98rem;
    color: var(--oxblood);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gate-error.show{ opacity: 1; }
.gate-card.shake{ animation: shake 0.5s ease; }

/* Strict access control: while locked, the app is not just covered —
   it does not render at all (no view, no scroll, no interaction). */
body.locked{ overflow: hidden; height: 100%; }
body.locked #app{ display: none; }
body.story-open{ overflow: hidden; height: 100%; }

/* ================= Journal page ================= */
.desk{
    position: relative;
    padding: clamp(24px, 5vw, 64px) clamp(14px, 4vw, 40px) 60px;
    display: flex;
    justify-content: center;
}
.journal-page{
    position: relative;
    width: 100%;
    max-width: 980px;
    background: var(--page);
    box-shadow:
        0 1px 0 var(--page-deep),
        0 10px 0 -4px var(--page-deep),
        0 12px 24px var(--shadow),
        0 32px 60px var(--shadow);
    padding: clamp(36px, 6vw, 68px) clamp(44px, 7vw, 84px) clamp(48px, 6vw, 76px) clamp(28px, 5vw, 52px);
    animation: pageIn 0.7s ease both;
}
.spine{
    position: absolute;
    top: 22px; bottom: 22px; right: 18px;
    width: 2px;
    background-image: repeating-linear-gradient(to bottom, var(--brass) 0 8px, transparent 8px 17px);
    opacity: 0.75;
}

.logout-btn{
    position: absolute;
    top: clamp(20px, 3vw, 34px);
    left: clamp(20px, 4vw, 40px);
    font-size: 0.98rem;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--card-edge);
    padding: 7px 18px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    z-index: 3;
}
.logout-btn:hover{ color: var(--oxblood); border-color: var(--oxblood); }

header.site-head{
    text-align: center;
    padding: 0 0 clamp(20px, 4vw, 36px);
    animation: appear 0.7s ease both;
}
.site-head .kicker{
    display: inline-block;
    font-size: 0.98rem;
    letter-spacing: 0.22em;
    color: var(--brass);
}
.site-head .greeting{
    display: block;
    margin-top: 12px;
    font-size: 1.15rem;
    color: var(--oxblood);
}
.site-head h1{
    font-size: clamp(2.8rem, 6.5vw, 4.8rem);
    margin: 12px 0 0;
    color: var(--ink-heading);
    text-wrap: balance;
}
.site-head p.tagline{
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--ink-soft);
    margin: 10px 0 0;
}
.stitch-divider{
    width: 200px;
    height: 3px;
    margin: 26px auto 0;
    background-image: repeating-linear-gradient(90deg, var(--brass) 0 10px, transparent 10px 20px);
    opacity: 0.7;
    position: relative;
}
.stitch-divider::before, .stitch-divider::after{
    content: "";
    position: absolute;
    top: 50%; width: 6px; height: 6px;
    background: var(--oxblood);
    border-radius: 50%;
    transform: translateY(-50%);
}
.stitch-divider::before{ right: -3px; }
.stitch-divider::after{ left: -3px; }

nav.tabs{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 28px 0 0;
    flex-wrap: wrap;
}
nav.tabs a{
    font-size: 1.22rem;
    text-decoration: none;
    color: var(--ink-heading);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, color 0.25s ease;
}
nav.tabs a:hover{ border-color: var(--brass); color: var(--oxblood); }
nav.tabs .sep{ color: var(--card-edge); }
.story-launch{
    font-size: 1.22rem;
    color: var(--ink-heading);
    background: transparent;
    border: none;
    padding: 0 0 3px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.story-launch:hover{ border-color: var(--brass); color: var(--oxblood); }

section{ margin-top: clamp(56px, 9vw, 96px); }
.section-head{ text-align: center; margin-bottom: clamp(28px, 5vw, 46px); }
.section-head .glyph{
    display: block;
    margin: 0 auto 10px;
    width: 28px; height: 28px;
    color: var(--oxblood);
}
.section-head h2{
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin: 0;
    color: var(--ink-heading);
    text-wrap: balance;
}
.section-head p{
    color: var(--ink-soft);
    font-size: 1.22rem;
    max-width: 46ch;
    margin: 10px auto 0;
    line-height: 1.85;
}

/* ---------- Role-based visibility ---------- */
html:not([data-viewer="me"]) .me-only{ display: none !important; }
html:not([data-viewer="loki"]) .loki-only{ display: none !important; }

/* ---------- Questions & answers ---------- */
.add-question-form{
    max-width: 640px;
    margin: 0 auto clamp(30px, 5vw, 46px);
    display: flex;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--card-edge);
}
.add-question-form input{
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--brass);
    padding: 8px 4px;
    font-size: 1.22rem;
    color: var(--ink);
}
.add-question-form input:focus{ outline: none; border-color: var(--oxblood); }

.questions-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 26px;
}
.q-card{
    background: var(--card);
    padding: 28px 30px 24px;
    box-shadow: 0 10px 20px var(--shadow);
    border-top: 3px dashed var(--card-edge);
    position: relative;
    animation: fadeUp 0.6s ease both;
}
.q-card.featured{ background: linear-gradient(160deg, #fdf6e3, var(--card)); }
.q-card.featured::before{
    content: "";
    position: absolute;
    top: -11px; right: 28px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--oxblood-deep), var(--oxblood) 70%);
    box-shadow: 0 3px 5px var(--shadow), inset -2px -2px 3px rgba(0,0,0,0.25);
}
.q-card .tag{
    display: inline-block;
    font-size: 0.98rem;
    letter-spacing: 0.08em;
    color: var(--oxblood);
    margin-bottom: 10px;
}
.qa-meta{
    display: block;
    font-size: 0.98rem;
    color: var(--ink-faint);
    margin-bottom: 12px;
}
.q-card h3{
    font-size: 1.4rem;
    margin: 0 0 16px;
    line-height: 1.6;
    color: var(--ink-heading);
}
.q-card textarea{
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: none;
    border-top: 1px dashed var(--ink-faint);
    background: transparent;
    padding: 10px 2px 0;
    font-size: 1.22rem;
    color: var(--ink);
    line-height: 1.8;
}
.q-card textarea::placeholder{ color: var(--ink-faint); }
.q-card textarea:focus{ outline: none; border-top-color: var(--oxblood); }
.q-card .row{ display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.save-btn{
    border: 1px solid var(--oxblood-deep);
    background: var(--oxblood);
    color: #f5eeda;
    font-size: 0.86rem;
    padding: 9px 22px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.save-btn:hover{ background: var(--oxblood-deep); transform: translateY(-1px); }
.q-card .who{ font-size: 0.98rem; color: var(--ink-faint); }
.qa-answered-meta{
    display: block;
    margin-top: 12px;
    font-size: 0.98rem;
    color: var(--ink-faint);
}

/* ---------- Tree of Memories ---------- */
.tree{ position: relative; padding: 20px 0 10px; }
.trunk{
    position: absolute;
    top: 0; bottom: 0;
    right: 50%;
    width: 4px;
    transform: translateX(50%);
    background: linear-gradient(to bottom, var(--oxblood), var(--oxblood-deep));
    border-radius: 2px;
}
.memory-node{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 56px;
    animation: fadeUp 0.6s ease both;
}
.memory-node:nth-child(odd){ justify-content: flex-start; }
.memory-node:nth-child(even){ justify-content: flex-end; }

.seal{
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--oxblood-deep) 0%, var(--oxblood) 65%, var(--oxblood-deep) 100%);
    box-shadow: 0 0 0 6px var(--page), 0 3px 6px var(--shadow), inset -2px -2px 4px rgba(0,0,0,0.3);
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.seal::after{ content: "❦"; color: #f0dcb0; font-size: 0.85rem; line-height: 1; }
.leaf-icon{
    position: absolute;
    right: 50%;
    width: 22px;
    color: var(--leaf);
    opacity: 0.85;
}
.memory-node:nth-child(odd) .leaf-icon{ transform: translateX(32px) rotate(-16deg); }
.memory-node:nth-child(even) .leaf-icon{ transform: translateX(-54px) rotate(16deg) scaleX(-1); }

.m-card{
    width: 44%;
    background: var(--card);
    padding: 22px 26px;
    box-shadow: 0 10px 20px var(--shadow);
    border-top: 3px dashed var(--card-edge);
}
.m-card .date{
    font-size: 0.98rem;
    letter-spacing: 0.05em;
    color: var(--oxblood);
    margin-bottom: 6px;
    display: block;
}
.m-card h3{ font-size: 1.35rem; margin: 0 0 8px; color: var(--ink-heading); }
.m-photo{
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    margin: 4px 0 12px;
    border: 1px solid var(--card-edge);
}
.m-card p{ margin: 0; font-size: 1.22rem; line-height: 1.85; color: var(--ink-soft); white-space: pre-wrap; }
.added-by{
    display: block;
    margin-top: 12px;
    font-size: 0.98rem;
    color: var(--ink-faint);
}

.memory-form{
    max-width: 640px;
    margin: 34px auto 0;
    padding: 24px 26px;
    border: 1px dashed var(--card-edge);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.memory-form .row2{ display: flex; gap: 14px; }
.memory-form input, .memory-form textarea{
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--brass);
    padding: 8px 4px;
    font-size: 1.22rem;
    color: var(--ink);
    width: 100%;
}
.memory-form textarea{
    min-height: 70px;
    border: 1px dashed var(--ink-faint);
    padding: 10px;
    line-height: 1.7;
}
.memory-form input:focus, .memory-form textarea:focus{ outline: none; border-color: var(--oxblood); }
.memory-form input[type="file"]{
    border: 1px dashed var(--card-edge);
    padding: 10px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.memory-form input[type="file"]::file-selector-button{
    border: 1px solid var(--oxblood-deep);
    background: var(--oxblood);
    color: #f5eeda;
    padding: 6px 14px;
    margin-inline-end: 10px;
    cursor: pointer;
}
.memory-form button{ align-self: flex-start; }

/* ---------- Kids' stories (أطفالنا) ---------- */
.kids-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 26px;
    margin-bottom: 30px;
}
.kid-card{
    background: var(--card);
    padding: 22px 26px;
    box-shadow: 0 10px 20px var(--shadow);
    border-top: 3px dashed var(--card-edge);
    animation: fadeUp 0.6s ease both;
}
.kid-card h3{ font-size: 1.35rem; margin: 0 0 8px; color: var(--ink-heading); }
.kid-photo{
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    margin: 4px 0 12px;
    border: 1px solid var(--card-edge);
}
.kid-card p{ margin: 0; font-size: 1.22rem; line-height: 1.85; color: var(--ink-soft); white-space: pre-wrap; }
.kid-meta{
    display: block;
    margin-top: 12px;
    font-size: 0.98rem;
    color: var(--ink-faint);
}

/* ---------- Bucket list (قائمة أمنياتنا) ---------- */
.bucket-list{
    list-style: none;
    margin: 0 auto 26px;
    padding: 0;
    max-width: 640px;
}
.bucket-item{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 2px;
    border-bottom: 1px dashed var(--card-edge);
}
.bucket-check{
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border: 1.5px solid var(--brass);
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bucket-check .check-mark{
    font-size: 0.98rem;
    color: #f5eeda;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.bucket-item.done .bucket-check{ background: var(--oxblood); border-color: var(--oxblood-deep); }
.bucket-item.done .bucket-check .check-mark{ opacity: 1; transform: scale(1); }
.bucket-body{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bucket-text{ font-size: 1.22rem; color: var(--ink); }
.bucket-item.done .bucket-text{ color: var(--ink-faint); text-decoration: line-through; }
.bucket-owner{ font-size: 0.98rem; color: var(--ink-faint); }

.inline-add{
    display: flex;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
}
.inline-add input{
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--brass);
    padding: 8px 4px;
    font-size: 1.22rem;
    color: var(--ink);
}
.inline-add input:focus{ outline: none; border-color: var(--oxblood); }

/* ---------- Time capsule (standalone) ---------- */
.capsule-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
    margin: 0 auto 30px;
}
.capsule-card{
    background: var(--card);
    padding: 24px 28px;
    border-top: 3px dashed var(--card-edge);
    box-shadow: 0 10px 20px var(--shadow);
}
.capsule-card.locked{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.seal-static{
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--oxblood-deep) 0%, var(--oxblood) 65%, var(--oxblood-deep) 100%);
    box-shadow: 0 3px 6px var(--shadow), inset -2px -2px 4px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
.seal-static::after{ content: "❦"; color: #f0dcb0; font-size: 1rem; }
.capsule-status{ margin: 0; font-size: 1.22rem; color: var(--ink-soft); }
.capsule-date{ font-size: 0.98rem; letter-spacing: 0.04em; color: var(--oxblood); display: block; margin-bottom: 8px; }
.capsule-message{ font-size: 1.22rem; line-height: 1.85; color: var(--ink); margin: 0 0 12px; white-space: pre-wrap; }
.capsule-meta{ font-size: 0.98rem; color: var(--ink-faint); display: block; }
.capsule-meta + .capsule-meta{ margin-top: 4px; }

.capsule-form{
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.capsule-form textarea{
    min-height: 90px;
    border: 1px dashed var(--ink-faint);
    background: transparent;
    padding: 12px;
    font-size: 1.22rem;
    color: var(--ink);
    line-height: 1.7;
}
.capsule-form textarea:focus{ outline: none; border-color: var(--oxblood); }
.capsule-type-row{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.98rem;
    color: var(--ink-soft);
}
.capsule-type-row label{ display: flex; align-items: center; gap: 8px; cursor: pointer; }
.capsule-type-row input[type="radio"]{ accent-color: var(--oxblood); }
.capsule-row{
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.capsule-row label{
    font-size: 0.98rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.capsule-row input[type="date"], .capsule-row input[type="time"]{
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--brass);
    padding: 6px 4px;
    font-size: 0.98rem;
    color: var(--ink);
}
.capsule-row input:focus{ outline: none; border-color: var(--oxblood); }

/* ---------- Admin access log ---------- */
.log-list{
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
}
.log-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 2px;
    border-bottom: 1px dashed var(--card-edge);
    font-size: 0.98rem;
}
.log-dot{ width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.log-item.success .log-dot{ background: var(--leaf); }
.log-item.fail .log-dot{ background: var(--oxblood); }
.log-who{ color: var(--ink); }
.log-time{ margin-inline-start: auto; font-size: 0.98rem; color: var(--ink-faint); }
.log-empty{ text-align: center; color: var(--ink-faint); font-size: 0.98rem; padding: 12px 0; }

/* ---------- Shared empty-state placeholder (Questions, Memories, Bucket, Capsule) ---------- */
.empty-state{
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-faint);
    font-size: 1.08rem;
    padding: 20px 0;
}

/* =========================================================
   Our Story — dedicated full-screen overlay.
   Deliberately NOT tuned for phones: built for iPad / tablet /
   desktop landscape widths, where the art can breathe.
   ========================================================= */
.story-fullscreen{
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--ink-heading);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.story-fullscreen.open{ opacity: 1; visibility: visible; }

.story-stage{
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.story-bg{
    position: absolute;
    inset: 0;
    background-color: var(--ink-heading);
}
.story-bg.placeholder{
    background-image: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.07), transparent 62%) !important;
}
/* A single persistent <img> (created by storyEngine.js's
   setupBgElement()), not a CSS background-image. Its `src` is only
   ever reassigned once the target is confirmed fully loaded AND
   decoded, so the swap is a cache-hit paint, not a fetch/decode — no
   layers, no opacity transition, nothing to animate or race. */
.story-bg-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* The hotspot layer is full-frame and carries zero visual presence
   of its own — no border, no fill, no cursor change, no glow, no
   focus outline. Clicks are still checked against the layer image's
   alpha channel (see storyEngine.js's isOpaqueAtClient()) so only
   the actually-drawn object responds, but nothing on screen hints
   at that. */
.story-hotspot{
    position: absolute;
    background: transparent;
    z-index: 1;
}
.story-hotspot img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.story-exit{
    position: absolute;
    top: 22px; left: 22px;
    z-index: 5;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.story-exit:hover{ opacity: 1; background: rgba(0,0,0,0.5); }

.story-music{
    position: absolute;
    top: 22px; right: 22px;
    z-index: 5;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.story-music:hover{ opacity: 1; background: rgba(0,0,0,0.5); }
.story-music .icon-pause{ display: none; }
.story-music.playing .icon-play{ display: none; }
.story-music.playing .icon-pause{ display: block; }

.story-subtitle{
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 4;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 12px 22px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.story-subtitle.show{ opacity: 1; }
.story-sub-en{
    font-size: 1.35rem;
    color: #fdf6e6;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    line-height: 1.4;
}
.story-sub-ar{
    font-size: 1.2rem;
    color: rgba(253,246,230,0.78);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    line-height: 1.5;
}

footer{
    text-align: center;
    margin-top: 90px;
    padding: 24px 0 0;
    border-top: 1px dashed var(--card-edge);
    color: var(--ink-faint);
    font-size: 0.92rem;
}

.toast{
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink-heading);
    color: var(--page);
    padding: 12px 26px;
    font-size: 0.92rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 50;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive: tablets ---------- */
@media (max-width: 900px){
    .questions-grid{ grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .kids-grid{ grid-template-columns: 1fr; max-width: 520px; margin: 0 auto 30px; }
    .m-card{ width: 62%; }
}

/* ---------- Responsive: phones ---------- */
@media (max-width: 640px){
    body{ font-size: 1.15rem; }
    .desk{ padding: 14px 8px 40px; }
    .journal-page{ padding: 34px 22px 44px; }
    .spine{ right: 8px; }
    .logout-btn{ top: 10px; left: 10px; font-size: 0.78rem; padding: 5px 12px; }
    nav.tabs{ gap: 12px; }
    nav.tabs a{ font-size: 0.98rem; }

    .trunk{ right: 16px; transform: none; }
    .memory-node{ justify-content: flex-start !important; padding-right: 38px; }
    .seal{ right: 16px; transform: none; }
    .leaf-icon{ right: 16px; }
    .memory-node:nth-child(odd) .leaf-icon,
    .memory-node:nth-child(even) .leaf-icon{ transform: translateX(20px) rotate(-16deg); }
    .m-card{ width: 100%; }

    .q-card{ padding: 22px 20px; }
    .add-question-form{ flex-direction: column; }
    .memory-form .row2{ flex-direction: column; }
    .inline-add{ flex-direction: column; }
    .capsule-type-row{ flex-direction: column; gap: 10px; }
    .capsule-row{ flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 380px){
    .gate-card{ width: 240px; }
    .gate-card::before{ border-left-width: 120px; border-right-width: 120px; margin-left: -120px; }
}