*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-library);
  color: var(--text-main);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* Mediterranean Light & Whitewashed Plaster */
  --bg-library: #FCFBF9; /* Bright sunlit stucco */
  --bg-reading: #FFFFFF;
  --bg-notebook: #F7F5F0; /* Warm sand / Driftwood */
  
  /* Aegean Sea & Slate Text */
  --text-main: #2B3A42; /* Dark slate, softer than black */
  --text-muted: #7A8B94; /* Soft sea-mist grey */
  --accent: #0081A7; /* Vibrant Aegean Cerulean */
  --border-struct: rgba(210, 190, 160, 0.4); /* Sun-bleached wood/sand lines */
  --border-glass: rgba(255, 255, 255, 0.8);
  
  /* Sea Glass & Summer Fruit Highlights */
  --hl-apricot: rgba(255, 140, 66, 0.25); 
  --hl-seafoam: rgba(145, 217, 143, 0.15);
  --hl-aegean:  rgba(0, 129, 167, 0.15);
  --hl-sand:    rgba(230, 185, 125, 0.5);

  --font-mono: 'JetBrains Mono', monospace;
}

.dappled-shadows {
  position: fixed; 
  top: -10%; left: -10%; width: 120%; height: 120%; 
  pointer-events: none; z-index: 0;
  
    radial-gradient(circle at 10% 20%, rgba(122, 139, 148, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(122, 139, 148, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 60% 85%, rgba(122, 139, 148, 0.04) 0%, transparent 50%);
    
  animation: gentleBreeze 25s infinite alternate ease-in-out;
  will-change: transform;
}

@keyframes gentleBreeze {
  0% {
    transform: translate(0px, 0px);
    opacity: 0.85;
  }
  50% {
    opacity: 1; 
  }
  100% {
    transform: translate(-3%, -3%); /* Slides the layer natively */
    opacity: 0.9;
  }
}

/* ── Screens (with Scroll Trapping Fix) ── */
.screen { 
  position: absolute; inset: 0; overflow-y: auto; 
  opacity: 1; visibility: visible; z-index: 10;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s, z-index 0s linear 0s; 
}
.screen.hidden { 
  opacity: 0; pointer-events: none; visibility: hidden; z-index: -1;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.6s, z-index 0s linear 0.6s; 
}

/* ── Aesthetic Upgrades: Typography ── */
.page-title { text-wrap: balance; }

.page-body p {
  hanging-punctuation: first last;
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0; 
  transform: translateY(15px);
}
.page-body p.is-visible { opacity: 1; transform: translateY(0); }

/* ── Aesthetic Upgrades: Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 129, 167, 0.15); border-radius: 10px; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 129, 167, 0.4); }
body::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; -ms-overflow-style: none; }

/* ════════════════════════════════════
   LIBRARY (OPEN-AIR SHELVES)
════════════════════════════════════ */
#library { display: block; padding: 4rem 2rem 10rem 2rem; z-index: 1; }
.library-header { text-align: center; margin: 0 auto 5rem auto; width: 100%; max-width: 1200px; position: relative; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.5rem; width: 100%; max-width: 1200px; align-items: start; margin: 0 auto; }
.library-title { font-family: 'Lora', serif; font-size: 2.5rem; font-weight: 500; color: var(--text-main); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.library-sub { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }

/* The Book Card Container */
.book-card {
  display: flex; flex-direction: column; cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.book-card:nth-child(even) { margin-top: 3rem; }

/* Gentle Bobbing Hover */
.book-card:hover { 
  transform: translateY(-8px); 
 
}

/* ── THE CABIN WINDOW FRAME ── */
.book-cover {
  width: 100%; 
  aspect-ratio: 2 / 3; 
  border-radius: 16px; 
  background: #EAE5DB; 
  position: relative; 
  overflow: hidden; 
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 35px -5px rgba(43, 58, 66, 0.15), inset 0 6px 12px rgba(0,0,0,0.15);
  margin-bottom: 1.2rem;
}

.book-cover img { 
  width: 100%; height: 100%; object-fit: cover; 
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

/* ── THE GLASS REFLECTION ── */
.book-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
  z-index: 2; pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover effects for Image Scale and Glass Shift */
.book-card:hover .book-cover img { transform: scale(1.05); }
.book-card:hover .book-cover::after { transform: translateX(30%) translateY(10%); }

/* ── THE TIDE PROGRESS WAVE ── */
.card-progress-bar { 
  position: absolute; bottom: 0; left: 0; right: 0; 
  height: 12px; 
  background: rgba(255,255,255,0.4); 
  z-index: 3; 
  backdrop-filter: blur(2px);
}

.card-progress-fill { 
  height: 100%; 
  background-color: var(--accent); 
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 20' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 L100,20 L100,10 Q75,20 50,10 Q25,0 0,10 Z' fill='%230081A7' fill-opacity='1'/%3E%3C/svg%3E");
  background-size: 30px 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  /* REMOVED: animation: waveRoll 2.5s linear infinite; */
  position: relative;
}

.card-progress-fill::before {
  content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 10px;
  background-image: inherit; background-size: inherit; background-repeat: inherit;
  /* REMOVED: animation: waveRoll 2.5s linear infinite; */
}

/* Typography */
.book-info h3 { font-family: 'Lora', serif; font-size: 1.15rem; color: var(--text-main); margin-bottom: 0.4rem; line-height: 1.3; font-weight: 500; }
.book-info p { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }

/* ════════════════════════════════════
   BOOK PREVIEW
════════════════════════════════════ */
#book-preview { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(43, 58, 66, 0.2); opacity:0; pointer-events:none; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
#book-preview.show { opacity:1; pointer-events:all; visibility: visible; transition: opacity 0.4s, visibility 0s linear 0s; }
.preview-card { display:flex; gap:3rem; background:rgba(255, 255, 255, 0.9); backdrop-filter:blur(20px) saturate(120%); border-radius:12px; border: 1px solid var(--border-glass); padding:3.5rem; max-width:800px; width:92%; box-shadow:0 30px 60px -15px rgba(0,0,0,0.1); transform:translateY(20px); transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1); position:relative; }
#book-preview.show .preview-card { transform:translateY(0); }
.preview-cover-large { width:200px; aspect-ratio: 2/3; border-radius:8px; flex-shrink:0; box-shadow:0 15px 30px rgba(0,0,0,0.1); overflow:hidden; border: 1px solid rgba(0,0,0,0.03); }
.preview-cover-large img { width: 100%; height: 100%; object-fit: cover; }
.preview-info { flex:1; display: flex; flex-direction: column; justify-content: center; }
.preview-title { font-family:'Lora',serif; font-size:2rem; font-weight:500; color:var(--text-main); margin-bottom:0.4rem; }
.preview-author { font-family:var(--font-mono); font-size:0.9rem; color:var(--text-muted); margin-bottom:1.5rem; text-transform: uppercase; }
.preview-blurb { font-size:1rem; line-height:1.7; color:#5A6D77; margin-bottom:2rem; font-weight: 300; }
.preview-progress { font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); margin-bottom:1.5rem; text-transform:uppercase; }
.preview-buttons { display:flex; gap:1rem; }
.btn { font-family:var(--font-mono); font-size:0.85rem; font-weight:600; text-transform:uppercase; padding:0.8rem 1.5rem; border-radius:99px; cursor:pointer; transition:all 0.2s; border:none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* The Standard Action */
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(0, 129, 167, 0.2); }
.btn-primary:hover { background: #006D8F; box-shadow: 0 8px 20px rgba(0, 129, 167, 0.3); transform: translateY(-2px); }

/* The Secondary Action */
.btn-secondary { background: transparent; color: var(--text-main); border: 1px solid var(--border-struct); }
.btn-secondary:hover { background: rgba(0,0,0,0.03); transform: translateY(-2px); }

/* The Premium/Purchase Action with Elegant Shimmer */
.btn-premium { 
  background: linear-gradient(135deg, #48CAE4 0%, #0081A7 100%); /* Sunlit Cerulean to Aegean Deep */
  color: #fff; 
  position: relative; 
  overflow: hidden; 
  box-shadow: 0 6px 15px rgba(0, 129, 167, 0.25); 
}
.btn-premium:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 25px rgba(0, 129, 167, 0.4); 
}
.btn-premium::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  /* A slightly brighter white glare for the water reflection effect */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: shimmerEffect 3.5s infinite;
}
@keyframes shimmerEffect { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.preview-close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:1px solid var(--border-struct); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-main); font-family: var(--font-mono); transition: all 0.2s; }
.preview-close:hover { background: rgba(0,0,0,0.04); }

/* ════════════════════════════════════
   READING SCREEN
════════════════════════════════════ */
#reading { background: var(--bg-reading); display:flex; align-items:stretch; overflow:hidden; color: var(--text-main); }
.reading-layout { position:relative; display:flex; width:100%; height:100vh; height:100dvh; overflow:hidden; z-index: 1; }
.reading-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; transition:margin-right 0.5s cubic-bezier(0.2,0.8,0.2,1); }
.reading-panel.notebook-open { margin-right: 400px; }

/* Progress Beam */
.reading-progress-beam { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(0,0,0,0.015); z-index: 20; border-right: 1px solid rgba(0,0,0,0.03); box-shadow: inset -1px 0 2px rgba(0,0,0,0.02); }
.reading-progress-fill { width: 100%; background: linear-gradient(180deg, var(--accent) 0%, #48CAE4 50%, var(--accent) 100%); background-size: 100% 200%; animation: shimmerBeam 4s linear infinite; transition: height 0.2s linear; height: 0%; box-shadow: 0 0 8px rgba(0, 129, 167, 0.3); border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
@keyframes shimmerBeam { 0% { background-position: 0% 0%; } 100% { background-position: 0% -200%; } }

/* Top Navigation */
.reading-topbar { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 2.5rem 1.2rem 3.5rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-struct); flex-shrink:0; z-index:10; }
.topbar-left { display:flex; align-items:center; gap:2rem; }
.back-btn { font-family:var(--font-mono); font-size:0.8rem; font-weight:500; text-transform:uppercase; color:var(--text-muted); cursor:pointer; background:none; border:none; display:flex; align-items:center; gap:0.5rem; transition:color 0.2s; }
.back-btn:hover { color:var(--text-main); }
.reading-book-title { font-family:'Lora',serif; font-size:1.1rem; font-weight:500; color:var(--text-main); padding-left: 2rem; border-left: 1px solid var(--border-struct); }
.topbar-right { display:flex; align-items:center; }
.topbar-btn { font-family:var(--font-mono); font-size:0.8rem; font-weight:600; text-transform:uppercase; color:var(--text-muted); cursor:pointer; background:none; border:1px solid transparent; padding:0.6rem 1.2rem; border-radius:99px; transition:all 0.2s; display:flex; align-items:center; gap:0.5rem; }
.topbar-btn:hover { background: rgba(0,0,0,0.03); color:var(--text-main); }
.topbar-btn.active { background: var(--bg-notebook); border-color: var(--border-struct); color: var(--text-main); }

/* ════════════════════════════════════
   READING AREA
════════════════════════════════════ */
.page-container { 
    flex: 1; 
    overflow-y: auto; 
    scroll-behavior: smooth; 
    display: block;
    padding: 4rem 1.5rem 8rem; 
}

.page-wrapper { 
    width: 100%; 
    max-width: 760px; 
    margin: 0 auto; 
    padding: 4rem; 
    position: relative; 
    
    /* 1. The core page is solid archival paper */
    background: var(--bg-reading);
    
    box-shadow: 
        0 15px 35px rgba(43, 58, 66, 0.05),
        0 0 0 1px rgba(210, 190, 160, 0.25),
        inset 0 0 40px rgba(230, 185, 125, 0.03);
    border-radius: 2px;
}

/* 2. The Left-Edge Topography Wash */
.page-wrapper::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 120px; /* Covers exactly the left padding area */
    pointer-events: none; /* Prevents it from blocking text selection */
    
    /* The vertical journey from Morning (Apricot) to Sea (Aegean) */
    background: linear-gradient(
        to bottom, 
        rgba(255, 140, 66, 0.12) 0%,     /* Apricot */
        rgba(255, 255, 255, 0) 15%,      /* Fades to nothing */
        rgba(255, 255, 255, 0) 85%,      /* Stays nothing in the middle */
        rgba(0, 129, 167, 0.12) 100%     /* Aegean */
    );
    
    /* Fades the color out horizontally so it blends into the white page */
    -webkit-mask-image: linear-gradient(to right, black 20%, transparent 100%);
    mask-image: linear-gradient(to right, black 20%, transparent 100%);
    
    border-radius: 2px 0 0 2px;
}

.page-body img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: 3.5rem auto; 
    position: relative;
    z-index: 2;
    
    /* ADDED: A filter that hugs the transparent, irregular pixels of your artwork */
    filter: drop-shadow(0 10px 15px rgba(43, 58, 66, 0.1)); 
    
    /* Optional: A slight sepia tint to match the archival paper vibe */
    transition: transform 0.4s ease, filter 0.4s ease;
}

.page-body img:hover {
    transform: translateY(-4px);
    /* The shadow expands perfectly around the organic edge when hovered */
    filter: drop-shadow(0 15px 25px rgba(43, 58, 66, 0.15)); 
}

/* Typography Headers */
.page-chapter { font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); margin-bottom:1.5rem; text-transform:uppercase; letter-spacing: 0.1em; }
.page-title { font-family:'Lora',serif; font-size:2.5rem; font-weight:400; line-height:1.2; margin-bottom:0.5rem; color:var(--text-main); }
.page-subtitle { font-size:1.2rem; color:var(--text-muted); margin-bottom:3rem; font-style: italic; }
.page-divider { font-family:var(--font-mono); font-size:1.5rem; color:var(--border-struct); margin: 3rem 0; text-align: center; }

/* The Paragraphs */
.page-body { position: relative; z-index: 1; font-family: 'Lora', serif; font-size: clamp(1.15rem, 2vw + 0.8rem, 1.4rem); line-height: 1.85; color: var(--text-main); }

.page-body p { 
    position: relative; /* Required for the anchors */
    margin-bottom: 1.8em; 
    text-align: justify; 
} 

.page-body { 
    counter-reset: folio-number; /* Names our counter */
    position: relative; 
    z-index: 1; 
    /* ... your other font settings ... */
}

/* 2. Tell the counter to increase by 1 every 4 paragraphs */
.page-body p:nth-of-type(4n) {
    counter-increment: folio-number;
}

/* 3. Draw the number in the left margin on those specific paragraphs */
.page-body p:nth-of-type(4n)::before {
    content: counter(folio-number); /* Automatically outputs 1, 2, 3, etc. */
    
    position: absolute;
    left: -3rem; /* Sits perfectly in the blank margin */
    top: 0.2rem;
    
    /* Styling to make it look like a classic printed folio number */
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.6;
    letter-spacing: 0.05em;
    pointer-events: none;
}


/* First Letter Drop Cap & UI Elements */
.page-body p:first-of-type::first-letter { font-size: 4em; line-height: 0.75; float: left; margin: 0.1em 0.15em 0 0; color: var(--accent); font-family: 'Lora', serif; }
.page-body, .page-body p { user-select: text; cursor: text; }
.page-body figure { margin: 3.5rem 0; text-align: center; }
.page-body figcaption { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* ════════════════════════════════════
   JOURNAL EXPANSION & MAZE
════════════════════════════════════ */
.notebook-panel.expanded { width: 800px; max-width: 90vw; }
.notebook-header-actions { display: flex; gap: 0.5rem; }
.header-icon-btn { background: none; border: 1px solid var(--border-struct); border-radius: 50%; width: 32px; height: 32px; color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.header-icon-btn:hover { background: rgba(0,0,0,0.05); color: var(--accent); border-color: var(--accent); }
.nb-entry-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.action-link { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--accent); text-decoration: none; padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid rgba(0, 129, 167, 0.2); transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; }
.action-link:hover { background: rgba(0, 129, 167, 0.05); }
.nb-context-tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.maze-section { 
    /* ADD THIS: Lock the width to exactly match the page-wrapper */
    width: 100%;
    max-width: 760px; 
    
    background: transparent; 
    border-top: 1px dashed var(--border-struct);
    border-bottom: 1px dashed var(--border-struct);
    border-radius: 0; 
    padding: 3rem 0; 
    margin: 4rem auto; 
    box-shadow: none; 
    text-align: center; 
}

.maze-wrapper { 
    position: relative; 
    display: inline-block; 
    
    /* ADD THIS: Forces the internal grid to respect the new 760px max limit */
    width: 100%;
    max-width: 100%; 
    
    border-radius: 4px; 
    overflow: hidden; 
    background: rgba(0, 129, 167, 0.02);
    border: 1px solid rgba(0, 129, 167, 0.15); 
    box-shadow: inset 0 2px 10px rgba(0, 129, 167, 0.05); 
}
.maze-header { font-family: 'Lora', serif; font-size: 1.5rem; color: var(--text-main); margin-bottom: 0.5rem; }
.maze-sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2rem; }

}
.maze-image { max-width: 100%; height: auto; display: block; }
.maze-header-row { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 0.5rem; width: 100%; }
.maze-expand-btn { position: absolute; right: 0; background: #fff; border: 1px solid var(--border-struct); border-radius: 50%; width: 32px; height: 32px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.maze-expand-btn:hover { background: rgba(0,0,0,0.03); color: var(--accent); border-color: var(--accent); }

.maze-section.fullscreen {
    background: rgba(252, 251, 249, 1); /* Made fully opaque so no black bleeds through */
    width: 100vw;   /* ADDED */
    height: 100vh;  /* ADDED */
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.maze-section.fullscreen .page-divider, .maze-section.fullscreen .maze-header, .maze-section.fullscreen .maze-sub { display: none; }
.maze-section.fullscreen .maze-header-row { margin: 0; height: 0; }
.maze-section.fullscreen .maze-expand-btn { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 50; width: 40px; height: 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.maze-section.fullscreen {
    background: rgba(252, 251, 249, 0.98);
    backdrop-filter: blur(12px);
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.maze-section.fullscreen .maze-wrapper {
    position: relative;
    flex-shrink: 0; 
    
    /* 🔴 THE FIX: Override the base width: 100% that was stretching the grid */
    width: auto !important; 
    height: auto !important;
    
    /* Keep it centered without allowing it to stretch horizontally */
    align-self: center;
    margin: 0 auto;
    
    /* Strict boundaries so it fits safely on screen */
    max-width: 90vw; 
    max-height: calc(100vh - 180px);
}

/* 3. The Image simply fills the mathematically perfect wrapper */
.maze-section.fullscreen .maze-image {
    display: block;
    width: 100%; 
    height: 100%; 
    /* No object-fit required! The JS ensures the wrapper is the exact right shape */
}

.maze-grid { position: absolute; top: 4%; bottom: 4.5%; left: 7.5%; right: 7.5%; display: grid; gap: 0; z-index: 2; }
.maze-cell { cursor: pointer; background: transparent; transition: background 0.2s; mix-blend-mode: multiply; }
.maze-cell:hover { background: rgba(0, 129, 167, 0.1); }
.maze-cell.selected { background: rgba(217, 108, 50, 0.35); }
.maze-cell.error { animation: shake 0.4s; background: rgba(239, 68, 68, 0.4); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.maze-controls { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; }
.btn-maze { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; padding: 0.8rem 1.5rem; border-radius: 99px; cursor: pointer; transition: all 0.2s; }
.btn-maze-check { background: var(--accent); color: white; border: none; }
.btn-maze-check:hover { background: #006D8F; transform: translateY(-1px); }
.btn-maze-reset { background: transparent; color: var(--text-muted); border: 1px solid var(--border-struct); }
.btn-maze-reset:hover { background: rgba(0,0,0,0.03); color: var(--text-main); }
.maze-feedback { 
  margin: 1.5rem auto 1.5rem auto; 
  max-width: 95%;
  font-family: 'Lora', serif; 
  font-style: italic;
  font-size: 1rem; 
  padding: 1rem 1.5rem; 
  border-radius: 6px; 
  display: none; 
  animation: popIn 0.3s cubic-bezier(0.2,0.8,0.2,1); 
  line-height: 1.6; 
  text-align: center;
}
.maze-feedback.show { display: block; }

/* Thematic Colors (Seafoam, Apricot, Aegean) */
.maze-feedback.success { background: rgba(145, 217, 143, 0.12); color: #1E5420; border: 1px solid rgba(145, 217, 143, 0.4); }
.maze-feedback.warning { background: rgba(255, 140, 66, 0.08); color: #933F0F; border: 1px solid rgba(255, 140, 66, 0.3); }
.maze-feedback.info { background: rgba(0, 129, 167, 0.08); color: #00485E; border: 1px solid rgba(0, 129, 167, 0.3); }

/* Retelling Field */
.nb-retelling-section { background: #FFFFFF; border: 1px solid var(--border-struct); border-radius: 8px; padding: 1.5rem; margin-bottom: 2.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.02); display: none; }
.nb-retelling-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); padding-bottom: 0.75rem; }
.nb-retelling-title { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--accent); letter-spacing: 0.05em; }
.dictate-btn { background: none; border: 1px solid var(--border-struct); border-radius: 50%; width: 32px; height: 32px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.dictate-btn:hover { background: rgba(0,0,0,0.03); color: var(--accent); border-color: var(--accent); }
.dictate-btn.recording { color: #EF4444; border-color: #EF4444; background: rgba(239, 68, 68, 0.1); animation: pulse-red 1.5s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.retelling-input { font-size: 0.95rem; line-height: 1.6; resize: vertical; min-height: 100px; }

/* ════════════════════════════════════
   HIGHLIGHTING & TOOLBAR (THE ARCHWAY PANEL)
════════════════════════════════════ */
.hl { border-radius: 2px; cursor: pointer; transition: filter 0.2s; padding: 0.1rem 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl:hover { filter: brightness(0.95); }

.hl-apricot { background: var(--hl-apricot); }
.hl-seafoam { background: rgba(145, 217, 143, 0.15); border-bottom: 2px dashed #91d98f; }
.hl-aegean  { background: rgba(0, 129, 167, 0.2); border-bottom: 2px solid #0081a7; padding-bottom: 2px; }
.hl-sand { background: rgba(230, 185, 125, 0.2); text-decoration: underline wavy #DEC5A1 2px; text-underline-offset: 4px; }

/* The Sleek Pill Toolbar */
.hl-toolbar {
  position: fixed; 
  background: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(20px) saturate(150%);
  border-radius: 50px; /* Highly rounded to cradle the circular portholes */
  padding: 0.6rem 0.8rem;
  display: none; 
  align-items: center; 
  justify-content: center;
  flex-wrap: nowrap; 
  width: max-content; 
  gap: 0.6rem; 
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,1);
  z-index: 300; 
}
.hl-toolbar.show { display: flex; animation: popIn 0.2s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes popIn { from { opacity: 0; transform: scale(0.95) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Toolbar Tail Pointer */
.hl-toolbar::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid rgba(0,0,0,0.04); border-bottom: 1px solid rgba(0,0,0,0.04);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.03); z-index: -1;
}

/* ── THE CRUISE PORTHOLE SWATCHES ── */
.hl-dot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%; /* Perfect circle */
  padding: 0.5rem; 
  cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 76px; height: 76px; /* A beautiful, prominent porthole size */
  position: relative; overflow: hidden;
  
  /* The Porthole Frame & Depth */
  background-color: rgba(255,255,255,0.9);
  border: 3px solid rgba(255, 255, 255, 1); /* Stark white rim */
  
  /* Outer drop shadow + deep inset shadow for the "recessed window" effect */
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.06), 
    inset 0 8px 16px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(0,0,0,0.05);
}

/* Tactile Push Animation */
.hl-dot:hover { 
  transform: translateY(-4px) scale(1.03); 
  box-shadow: 
    0 12px 24px rgba(0,0,0,0.1), 
    inset 0 4px 10px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(0,0,0,0.05); 
}
.hl-dot:active { transform: translateY(0) scale(0.96); box-shadow: inset 0 10px 20px rgba(0,0,0,0.2); }

/* ── 1. The Glass Reflection Overlay ── */
.hl-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  /* Creates a curved glossy glare on the top left of the glass */
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
  z-index: 3; pointer-events: none;
  transition: transform 0.6s ease;
}
/* The glare shifts when hovered, like shifting your viewing angle */
.hl-dot:hover::after { transform: translateX(15%) translateY(15%); }

/* ── 2. The Rolling Tide Interaction ── */
.hl-dot::before {
  content: ''; position: absolute; bottom: 0; left: -50%;
  width: 200%; height: 100%; /* Made 200% wide to allow horizontal scrolling */
  background-size: 50% 30px; background-position: bottom left; background-repeat: repeat-x;
  z-index: 1; opacity: 0.85; pointer-events: none; mix-blend-mode: multiply;
  transform: translateY(65%); /* Water rests low in the window */
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), background-position 0.7s ease-in-out;
}
.hl-dot:hover::before { 
  transform: translateY(15%); 
  /* The magic touch: The wave physically rolls across the window! */
  background-position: bottom right; 
}

/* ── 3. The Typography ── */
.hl-dot-tooltip { 
  position: relative; z-index: 4; /* Keeps text above the glass and waves */
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.15; 
  text-shadow: 0 1px 2px rgba(255,255,255,0.9); /* Ensures legibility against the moving wave */
}

/* ── 4. Swatch Color Palettes ── */
/* Base backgrounds slightly darkened to simulate looking out at the sky/ocean */
.hl-dot[data-hl="apricot"] { background-color: rgba(255, 140, 66, 0.12); color: #933F0F; } 
.hl-dot[data-hl="apricot"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 30' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 L100,30 L100,10 Q75,25 50,10 Q25,-5 0,10 Z' fill='%23D96C32' fill-opacity='0.25'/%3E%3C/svg%3E"); }

.hl-dot[data-hl="seafoam"] { background-color: rgba(145, 217, 143, 0.12); color: #1E5420; }
.hl-dot[data-hl="seafoam"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 30' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 L100,30 L100,15 Q80,25 50,15 Q20,5 0,15 Z' fill='%236BA669' fill-opacity='0.25'/%3E%3C/svg%3E"); }

.hl-dot[data-hl="aegean"]  { background-color: rgba(0, 129, 167, 0.12); color: #00485E; }
.hl-dot[data-hl="aegean"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 30' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 L100,30 L100,5 Q75,20 50,5 Q25,-10 0,5 Z' fill='%230081A7' fill-opacity='0.25'/%3E%3C/svg%3E"); }

.hl-dot[data-hl="sand"]    { background-color: rgba(230, 185, 125, 0.12); color: #57401A; }
.hl-dot[data-hl="sand"]::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 30' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 L100,30 L100,12 Q75,18 50,12 Q25,6 0,12 Z' fill='%23A68A61' fill-opacity='0.25'/%3E%3C/svg%3E"); }

/* Small actions */
.hl-sep { width: 1px; height: 32px; background: rgba(0,0,0,0.06); margin: 0 0.2rem; }

/* The X Close button has been completely eliminated */
.hl-cancel { display: none !important; }

/* Remaining action buttons (like TTS Play) are now discreet rivets */
.hl-action-btn { 
  color: var(--text-muted); background: transparent; border: 1px solid rgba(0,0,0,0.05); border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; height: 32px; width: 32px; 
}
.hl-action-btn:hover { color: var(--text-main); background: rgba(0,0,0,0.03); transform: translateY(-2px); border-color: rgba(0,0,0,0.1); }
.hl-action-btn:active { transform: translateY(0); }
.hl-action-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* ════════════════════════════════════
   NOTEBOOK PANEL (Warm Driftwood)
════════════════════════════════════ */
.notebook-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; background: var(--bg-notebook); border-left: 1px solid var(--border-struct); transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 50; display: flex; flex-direction: column; box-shadow: -15px 0 30px rgba(0,0,0,0.03); }
.notebook-panel.open { transform: translateX(0); }
.notebook-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-struct); display: flex; align-items: center; justify-content: space-between; background: transparent; }
.notebook-title { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; color: var(--text-main); margin-bottom: 0.3rem; }
.notebook-subtitle { font-family: 'Lora', serif; font-size: 0.95rem; font-style: italic; color: var(--text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notebook-close { background: none; border: 1px solid var(--border-struct); border-radius: 50%; width: 32px; height: 32px; color: var(--text-main); font-family: var(--font-mono); cursor: pointer; display:flex; align-items:center; justify-content:center; transition: all 0.2s; }
.notebook-close:hover { background: rgba(0,0,0,0.05); }

.notebook-content { 
    flex: 1; 
    overflow-y: auto; 
    padding: 2rem; 
    scroll-behavior: smooth; 
    min-height: 0; /* 🟢 This tells the browser to trigger the scrollbar! */
}

/* 🟢 Make sure the notebook scrollbar is beautiful and visible */
.notebook-content::-webkit-scrollbar { width: 6px; }
.notebook-content::-webkit-scrollbar-track { background: transparent; }
.notebook-content::-webkit-scrollbar-thumb { background: rgba(0, 129, 167, 0.2); border-radius: 10px; }
.notebook-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 129, 167, 0.5); }

.nb-empty-msg { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 3rem; line-height: 1.6; border: 1px dashed var(--border-struct); padding: 2rem; border-radius: 8px; }

.nb-entry { background: #FFFFFF; border: 1px solid var(--border-struct); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; transition: box-shadow 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.nb-entry:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.04); }
.nb-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.04); padding-bottom: 0.75rem; }
.nb-entry-lens { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 4px; }
.nb-entry-text { font-family: 'Lora', serif; font-size: 1rem; line-height: 1.7; color: var(--text-main); margin-bottom: 1rem; font-style: italic; }

.nb-delete-btn { 
  background: none; border: none; color: var(--text-muted); cursor: pointer; 
  padding: 0.4rem; margin: -0.4rem; border-radius: 4px; display: flex; 
  align-items: center; justify-content: center; transition: all 0.2s; opacity: 0.6; 
}

.nb-delete-btn:hover { color: #EF4444; opacity: 1; background: rgba(239, 68, 68, 0.08); }
.nb-delete-btn svg { width: 16px; height: 16px; }

.nb-entry { position: relative; overflow: hidden; } 

.nb-delete-overlay { 
  position: absolute; inset: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); 
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; 
  opacity: 0; pointer-events: none; transition: opacity 0.2s cubic-bezier(0.2,0.8,0.2,1); z-index: 10; 
}
.nb-delete-overlay.show { opacity: 1; pointer-events: auto; }

.nb-del-msg { font-family: 'Lora', serif; font-size: 1.05rem; color: var(--text-main); font-style: italic; }
.nb-del-actions { display: flex; gap: 0.8rem; }

.nb-btn-keep { 
  background: transparent; color: var(--text-muted); border: 1px solid var(--border-struct); 
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; 
  padding: 0.5rem 1rem; border-radius: 99px; cursor: pointer; transition: all 0.2s; 
}
.nb-btn-keep:hover { background: rgba(0,0,0,0.04); color: var(--text-main); }

.nb-btn-remove { 
  background: #EF4444; color: white; border: none; font-family: var(--font-mono); font-size: 0.75rem; 
  font-weight: 600; text-transform: uppercase; padding: 0.5rem 1.2rem; border-radius: 99px; cursor: pointer; 
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); transition: all 0.2s; 
}
.nb-btn-remove:hover { background: #DC2626; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3); }

.nb-note-input { background: var(--bg-notebook); border: 1px solid transparent; border-radius: 6px; width: 100%; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-main); padding: 0.8rem; outline: none; resize: vertical; min-height: 60px; transition: border-color 0.2s; }
.nb-note-input::placeholder { color: var(--text-muted); }
.nb-note-input:focus { border-color: var(--accent); background: #FFFFFF; }

*::selection { background: rgba(72, 202, 228, 0.35); color: inherit; }
*::-moz-selection { background: rgba(72, 202, 228, 0.35); color: inherit; }

/* ── Technical Additions: Mobile Responsiveness ── */
@media (max-width: 768px) {
  .notebook-panel, .notebook-panel.expanded { width: 100vw; max-width: 100vw; }
  .reading-panel.notebook-open { display: none; }
  .reading-topbar { padding: 1.2rem 1.5rem; }
  .page-wrapper { padding: 2rem 1.5rem; }
  .page-wrapper::after { display: none; }

  .page-wrapper::before {
        display: block !important;
        width: 35px; /* Thinner wash so it stays in the margin */
    }

    /* 3. Pull the numbers inward so they fit inside the smaller mobile margin */
    .page-body p:nth-of-type(4n)::before {
        left: -1.1rem;
        font-size: 0.65rem; 
    }
  
  /* 1. LIBRARY SHELVES: Make books a single, large, perfectly centered column */
  .book-grid { 
    grid-template-columns: minmax(200px, 320px); 
    justify-content: center; 
    gap: 2.5rem; 
  }
  .book-card:nth-child(even) { margin-top: 0; }
  
  /* 2. PREVIEW MODAL: Fix alignment, increase size, and prevent button overlap */
  .preview-card { 
    flex-direction: column; 
    padding: 4rem 1.5rem 2rem; /* Extra top padding for the X button */
    gap: 1.5rem; 
    max-height: 90vh; 
    overflow-y: auto; 
    align-items: center; 
    text-align: center; 
  }
  
  .preview-cover-large { 
    width: 240px; /* Much larger! (was 140px) */
    max-width: 75vw; /* Keeps it safe on extremely tiny screens */
    margin: 0 auto; /* Forces strict horizontal centering to fix the right-alignment bug */
    flex-shrink: 0;
  }
  
  .preview-title { font-size: 1.5rem; }
  .preview-buttons { flex-direction: column; width: 100%; }
  .preview-buttons .btn { width: 100%; text-align: center; justify-content: center; display: flex; }
}

/* ════════════════════════════════════
   ACCESSIBILITY & UX ADDITIONS
════════════════════════════════════ */
body.focus-mode .page-body { font-family: var(--font-mono); letter-spacing: 0.04em; line-height: 2.2; font-size: clamp(0.95rem, 2vw + 0.5rem, 1.2rem); }
body.focus-mode .page-body p { margin-bottom: 2em; }
body.focus-mode .page-body p:first-of-type::first-letter { font-family: var(--font-mono); }

.nb-entry-text.jumpable { cursor: pointer; position: relative; transition: color 0.2s; }
.nb-entry-text.jumpable:hover { color: var(--accent); }
.nb-entry-text.jumpable::after { content: '↗'; position: absolute; margin-left: 6px; font-size: 0.8em; opacity: 0; transform: translateY(2px); transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nb-entry-text.jumpable:hover::after { opacity: 1; transform: translateY(-2px); }

@keyframes highlightFlash { 0%, 100% { box-shadow: 0 0 0 transparent; filter: brightness(1); } 20%, 80% { box-shadow: 0 0 0 4px rgba(0, 129, 167, 0.4); border-radius: 4px; filter: brightness(0.9); } }
.hl-flash { animation: highlightFlash 2s ease; display: inline-block; position: relative; z-index: 10; }

/* ════════════════════════════════════
   MINDFUL PAUSE NUDGE
════════════════════════════════════ */
.mindful-nudge { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 100px); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--border-struct); border-radius: 12px; padding: 1.2rem; width: 90%; max-width: 400px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 1rem; opacity: 0; pointer-events: none; z-index: 200; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mindful-nudge.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.nudge-content { display: flex; gap: 1rem; align-items: flex-start; }
.nudge-icon { font-size: 1.5rem; background: var(--bg-notebook); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.nudge-title { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--accent); text-transform: uppercase; margin-bottom: 0.2rem; }
.nudge-text { font-family: 'Lora', serif; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.nudge-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 0.8rem; }
.nudge-close { background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); cursor: pointer; padding: 0.5rem; font-size: 0.9rem; }
.nudge-close:hover { color: var(--text-main); }

/* ════════════════════════════════════
   PHASE 2: SECOND READ GUIDE
════════════════════════════════════ */
.second-read-guide { text-align: left; animation: popIn 0.5s ease; margin-bottom: 2rem; }
.guide-title { font-family: 'Lora', serif; font-size: 1.2rem; color: var(--text-main); margin-bottom: 0.5rem; }
.guide-intro { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.5rem; }
.guide-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.guide-card { background: #FFFFFF; border: 1px solid var(--border-struct); border-radius: 8px; padding: 1.2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.guide-card-header { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.6rem; color: var(--text-main); }
.guide-dot { width: 12px; height: 12px; border-radius: 50%; }
.guide-dot.apricot { background: #D96C32; }
.guide-dot.seafoam { background: #91d98f; }
.guide-dot.aegean { background: #006D8F; }
.guide-dot.sand { background: #A68A61; }
.guide-quote { font-family: 'Lora', serif; font-style: italic; font-size: 0.9rem; color: var(--text-main); margin-bottom: 0.4rem; }
.guide-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.guide-task { font-size: 0.8rem; color: var(--text-main); margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--border-struct); line-height: 1.4; }
.guide-task strong { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-size: 0.7rem; }

/* ════════════════════════════════════
   MOBILE FIX: RESPONSIVE TOPBAR
════════════════════════════════════ */
@media (max-width: 768px) {
  .reading-topbar { padding: 0.8rem 1rem; gap: 0.5rem; }

.hl-toolbar {
    gap: 0.3rem; /* Shrink the space between buttons */
    padding: 0.4rem 0.5rem;
    width: auto;
    max-width: calc(100vw - 20px); /* Strictly prevent it from overflowing the screen */
  }
  
  .hl-dot {
    width: 54px; /* Scale down the portholes for mobile */
    height: 54px;
    border-width: 2px; /* Thinner glass rim */
    padding: 0.2rem;
  }
  
  .hl-dot-tooltip {
    font-size: 0.5rem; /* Scale down the text so it fits inside the smaller window */
  }

  .hl-action-btn {
    flex-shrink: 0; /* Guarantee the Listen button NEVER gets squished */
  }
  
  .topbar-left { gap: 0.8rem; flex: 1; min-width: 0; }
  
  .reading-book-title { 
    font-size: 0.95rem; 
    padding-left: 0.8rem; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
  }
  
  .topbar-right { flex-shrink: 0; gap: 0.2rem; }
  
  .topbar-btn { padding: 0.5rem; font-size: 0; gap: 0; }
  .topbar-btn svg { margin: 0 !important; width: 20px; height: 20px; }
  
  .back-btn { font-size: 0; gap: 0; flex-shrink: 0; }
  .back-btn svg { margin: 0; width: 20px; height: 20px; }
}

/* ════════════════════════════════════
   ANTI-COPY & UI LOCKDOWN
════════════════════════════════════ */
/* 1. Prevent dragging, saving, and selecting images */
img, .maze-image {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* Disables right-click menus directly on images */
}

/* 2. Prevent highlighting the App UI (Makes it feel like a native app) */
.reading-topbar, 
.hl-toolbar, 
.notebook-panel, 
.library-header, 
.preview-card,
.btn {
  user-select: none;
  -webkit-user-select: none;
}

/* 3. Disable iOS callout menu (Copy/Share) when selecting text */
.page-body {
  -webkit-touch-callout: none; 
}

body.page-template-reading-room-template header,
body.page-template-reading-room-template .ast-header-wrap,
body.page-template-reading-room-template .site-header,
body.page-template-reading-room-template #masthead,
body.page-template-reading-room-template .mobile-menu-toggle {
    display: none !important;
}

/* ════════════════════════════════════
   FLOATING GLOSSARY TOAST
════════════════════════════════════ */
#gloss-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 50px); /* Pushed down and hidden */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-struct);
  border-radius: 8px;
  padding: 1.2rem 2.5rem 1.2rem 1.5rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  z-index: 400; /* Keeps it above everything */
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 90vw;
  max-width: 400px;
}

/* The class JS adds when a word is clicked */
#gloss-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.gloss-toast-term {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gloss-toast-def {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.5;
}

.gloss-toast-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.2rem;
  line-height: 1;
  transition: color 0.2s;
}

.gloss-toast-close:hover {
  color: var(--text-main);
}

/* ════════════════════════════════════
   PASSCODE MODAL
════════════════════════════════════ */
.passcode-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.passcode-overlay.show { opacity: 1; pointer-events: auto; }

.passcode-box {
  background: #FFFFFF; border: 1px solid var(--border-struct); border-radius: 12px;
  padding: 2.5rem; width: 90%; max-width: 400px; box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  text-align: center; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.passcode-overlay.show .passcode-box { transform: translateY(0); }

.passcode-title { font-family: 'Lora', serif; font-size: 1.4rem; color: var(--text-main); margin-bottom: 0.5rem; }
.passcode-desc { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5; }

.passcode-input {
  background: var(--bg-notebook); border: 1px solid var(--border-struct); border-radius: 6px;
  width: 100%; font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-main);
  padding: 0.8rem; outline: none; margin-bottom: 1.5rem; text-align: center; transition: border-color 0.2s;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.passcode-input:focus { border-color: var(--accent); background: #FFFFFF; }
.passcode-input::placeholder { font-weight: 400; text-transform: none; color: #b0b8bc; }

.passcode-actions { display: flex; gap: 1rem; justify-content: center; }
.passcode-actions .btn { flex: 1; padding: 0.7rem 1rem; }

/* ════════════════════════════════════
   FLOATING SUPPORT PORTHOLE (LIBRARY)
════════════════════════════════════ */
.support-porthole {
    position: absolute;
    top: -10px;    /* Floats just slightly above the title alignment */
    right: 2rem;   /* Anchors it safely to the right side of the header */
    z-index: 40;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: rgba(0, 129, 167, 0.05);
    border: 3px solid #ffffff;
    box-shadow: 
        0 8px 16px rgba(0,0,0,0.06), 
        inset 0 8px 16px rgba(0,0,0,0.1),
        inset 0 0 0 1px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    /* The Gentle Bobbing Animation */
    animation: portholeFloat 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover Interaction: Pauses floating, presses down slightly */
.support-porthole:hover {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 12px 24px rgba(0, 129, 167, 0.15), 
        inset 0 4px 10px rgba(0,0,0,0.1);
}

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

/* ── The Looping Water Wave ── */
.support-porthole::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%; 
    z-index: 1; 
    
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 30' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 L100,30 L100,10 Q75,25 50,10 Q25,-5 0,10 Z' fill='%230081A7' fill-opacity='0.15'/%3E%3C/svg%3E");
    background-size: 200% 25px; 
    background-position: 0% bottom;
    background-repeat: repeat-x;
    
    pointer-events: none;
    transition: background-size 0.4s ease, opacity 0.4s ease, background-position 0.6s ease-out;
}

.support-porthole:hover::before {
    background-size: 200% 35px; 
    background-position: -30% bottom; /* Gives a nice single splash effect on hover instead */
    opacity: 0.8;
}

/* ── The Glass Reflection ── */
.support-porthole::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
    z-index: 3;
    pointer-events: none;
    transition: transform 0.6s ease;
}
.support-porthole:hover::after {
    transform: translateX(15%) translateY(15%);
}

/* ── The Logo Inside ── */
.support-logo {
    width: 60%;
    height: auto;
    position: relative;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.support-porthole:hover .support-logo {
    opacity: 1;
}

/* ── The Slide-Out Tooltip ── */
.support-label {
    position: absolute;
    right: 80px; /* Slides out to the left so it doesn't cross the screen edge */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-main);
    border: 1px solid var(--border-struct);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.support-porthole:hover .support-label {
    opacity: 1;
    transform: translateX(0);
}

/* ── Mobile Adjustments ── */
@media (max-width: 768px) {
    .support-porthole {
        /* Shrinks it and drops it below the header text on mobile */
        position: relative;
        right: auto;
        top: auto;
        margin: -2rem auto 2rem auto; /* Centers it between the header and books */
        width: 50px;
        height: 50px;
    }
    .support-label {
        display: none !important; 
    }
}