/* ─── Tokens ─────────────────────────────────────────────────────────────── */ /* Note: Google Fonts are loaded via tags in the HTML */ :root { --black: #0a0008; --black-mid: #110d18; --black-soft: #1a1525; --purple-dark: #1e1030; --purple-mid: #2d1b50; --gold: #C9A84C; --gold-light: #e8c96a; --gold-dim: #8a6e2a; --cream: #f2ead8; --cream-dim: #d0c49a; --white: #f5f5f5; --grey: #6a5f7a; --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --radius: 8px; --radius-lg: 16px; --transition: 0.25s ease; } /* ─── Light Theme ────────────────────────────────────────────────────────── */ [data-theme="light"] { --black: #f5ede0; --black-mid: #ede0cc; --black-soft: #e2d0b8; --purple-dark: #ede5f8; --purple-mid: #ddd0f5; --gold: #8a5f18; --gold-light: #a87828; --gold-dim: #b89040; --cream: #1a0830; --cream-dim: #3a2055; --white: #0d0520; --grey: #5a486a; } [data-theme="light"] body { background: var(--black); color: var(--cream); } [data-theme="light"] .home-bg { background: radial-gradient(ellipse at 30% 20%, rgba(160, 120, 220, 0.1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(138, 95, 24, 0.05) 0%, transparent 50%), var(--black); } [data-theme="light"] .top-bar { background: rgba(245, 237, 224, 0.92); border-bottom-color: rgba(138, 95, 24, 0.15); } [data-theme="light"] .spread-card { background: rgba(215, 195, 240, 0.45); border-color: rgba(138, 95, 24, 0.25); } [data-theme="light"] .spread-card:hover { background: rgba(205, 180, 240, 0.65); border-color: var(--gold-dim); } [data-theme="light"] .card-back { background: radial-gradient(ellipse at center, #fef8ec 0%, #edd488 55%, #d4a84c 100%); border-color: rgba(160, 112, 20, 0.5); box-shadow: inset 0 0 20px rgba(200,140,30,0.12); } [data-theme="light"] .card-back::before { border-color: rgba(248, 220, 140, 0.6); } [data-theme="light"] .card-back img { border-color: rgba(120, 88, 10, 0.45) !important; box-shadow: 0 0 10px rgba(180,140,30,0.35), 0 0 20px rgba(180,140,30,0.12) !important; } [data-theme="light"] .card-back-text { color: #2a1800; text-shadow: 0 1px 3px rgba(255, 240, 160, 0.5); } [data-theme="light"] .card-back-tagline { color: rgba(42, 24, 0, 0.82); text-shadow: none; } [data-theme="light"] .card-front { background: linear-gradient(160deg, #2d1b50 0%, #110d18 60%, #0a0008 100%); } [data-theme="light"] .detail-panel { background: linear-gradient(180deg, #1e0e40 0%, #0e0820 100%); border-top-color: rgba(138, 95, 24, 0.35); } [data-theme="light"] .panel-overlay { background: rgba(80, 50, 120, 0.3); } [data-theme="light"] .browse-card-row { background: rgba(215, 195, 240, 0.35); border-color: rgba(138, 95, 24, 0.12); } [data-theme="light"] .browse-card-row:hover { background: rgba(205, 180, 240, 0.55); border-color: rgba(138, 95, 24, 0.38); } [data-theme="light"] #screen-card { background: radial-gradient(ellipse at 50% 0%, rgba(140, 100, 200, 0.12) 0%, transparent 60%), #0a0008; } [data-theme="light"] .card-page-visual { background: linear-gradient(160deg, #2d1b50 0%, #110d18 60%, #1a1525 100%); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(140, 100, 200, 0.15); } [data-theme="light"] .booklet-card-entry:hover { background: rgba(205, 180, 240, 0.2); } [data-theme="light"] .booklet-spread-entry { background: rgba(215, 195, 240, 0.3); border-color: rgba(138, 95, 24, 0.15); } [data-theme="light"] .truth-divider::before, [data-theme="light"] .truth-divider::after { background: rgba(138, 95, 24, 0.2); } /* Light theme: My Oracle page — hardcoded-dark-bg elements need light text */ [data-theme="light"] .rank-row { --cream-dim: #d0c49a; --gold: #C9A84C; } [data-theme="light"] .rank-name-big { color: #e8c96a; } [data-theme="light"] .rank-xp-text { color: #d0c49a; } [data-theme="light"] .oracle-action-btn { color: #d0c49a; border-color: rgba(201,168,76,0.3); } [data-theme="light"] .oracle-action-btn:hover { color: #f2ead8; border-color: var(--gold-dim); } /* Light theme: choice bar text */ [data-theme="light"] .ccb-cancel { color: #d0c49a; } [data-theme="light"] .ccb-label { color: #c9a84c; } /* ─── Dragon Logo Image ───────────────────────────────────────────────────── */ .dragon-logo { border-radius: 50%; object-fit: cover; display: block; } .dragon-mark .dragon-logo { width: 72px; height: 72px; } .cpv-dragon .dragon-logo { width: 28px; height: 28px; } .booklet-dragon .dragon-logo { width: 56px; height: 56px; } /* ─── Global Nav ─────────────────────────────────────────────────────────── */ .global-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: calc(56px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1rem; background: rgba(10, 0, 8, 0.94); border-bottom: 1px solid rgba(201, 168, 76, 0.15); backdrop-filter: blur(14px); } .gn-links { display: flex; align-items: center; gap: 0.15rem; justify-self: start; } .gn-link { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); padding: 0.35rem 0.5rem; border-radius: 20px; transition: color var(--transition), background var(--transition); } .gn-link:hover { color: var(--cream); } .gn-link.active { color: var(--gold); background: rgba(201, 168, 76, 0.1); } .gn-brand { display: flex; align-items: center; gap: 0.5rem; justify-self: center; cursor: pointer; } .gn-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 12px rgba(201,168,76,0.3); } .gn-title { font-family: var(--font-serif); font-size: 0.9rem; color: var(--white); letter-spacing: 0.04em; } .gn-right { display: flex; align-items: center; gap: 0.5rem; justify-self: end; } .gn-theme { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.25); color: var(--gold-dim); font-size: 0.78rem; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition); } .gn-theme:hover { border-color: var(--gold); color: var(--gold); } [data-theme="light"] .global-nav { background: rgba(245, 237, 224, 0.96); border-bottom-color: rgba(138, 95, 24, 0.15); } [data-theme="light"] .gn-theme { background: rgba(220, 200, 240, 0.4); } /* ─── Card Image Area (reading cards) ────────────────────────────────────── */ .card-front { padding: 0; } .card-img-area { width: 100%; height: 52%; flex-shrink: 0; position: relative; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-img-area::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.1) 0%, transparent 55%), linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.35) 100%); z-index: 2; } .card-img-area::after { content: ''; position: absolute; width: 58%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; z-index: 2; pointer-events: none; } .card-art-bg { position: absolute; inset: 0; z-index: 1; } .card-art-bg svg { width: 100%; height: 100%; display: block; } .card-img-symbol { font-size: 2.8rem; opacity: 0.93; color: rgba(255,255,255,0.92); position: relative; z-index: 3; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); line-height: 1; display: block; } .card-img-logo { position: absolute; bottom: 5px; right: 6px; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; opacity: 0.4; z-index: 3; } .card-img-num { position: absolute; top: 5px; left: 7px; font-size: 0.48rem; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; z-index: 1; } .card-front-body { flex: 1; padding: 0.5rem 0.65rem 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; min-height: 0; } /* ─── Card Page Visual Image Area ────────────────────────────────────────── */ .cpv-img-area { flex-shrink: 0; height: 54%; margin: -1.25rem -1rem 0.85rem; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px 12px 0 0; } .cpv-img-area::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.1) 0%, transparent 55%), linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4) 100%); z-index: 2; } .cpv-img-area::after { content: ''; position: absolute; width: 52%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; pointer-events: none; z-index: 2; } .cpv-img-symbol { font-size: 5.5rem; opacity: 0.93; color: rgba(255,255,255,0.92); position: relative; z-index: 3; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)); line-height: 1; display: block; } .cpv-img-logo { position: absolute; bottom: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; opacity: 0.38; z-index: 3; } .cpv-img-num { position: absolute; top: 10px; left: 12px; font-size: 0.62rem; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; z-index: 1; } .cpv-body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } /* ─── Inline Editing ─────────────────────────────────────────────────────── */ .editable { cursor: text; border-radius: 4px; outline: none; transition: background var(--transition), box-shadow var(--transition); min-height: 1em; } .editable:hover { background: rgba(201, 168, 76, 0.06); box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2); } .editable:focus { background: rgba(201, 168, 76, 0.1); box-shadow: 0 0 0 1.5px rgba(201, 168, 76, 0.45); } .editable:empty::before { content: attr(data-placeholder); color: var(--grey); opacity: 0.5; pointer-events: none; } .edit-hint { font-size: 0.6rem; color: var(--grey); letter-spacing: 0.08em; opacity: 0; transition: opacity var(--transition); display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; } .card-page-content:hover .edit-hint { opacity: 0.6; } .has-edits .edit-hint { opacity: 0.8; color: var(--gold-dim); } .edit-reset { font-size: 0.62rem; color: var(--grey); padding: 0.2rem 0.5rem; border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 10px; transition: color var(--transition), border-color var(--transition); display: none; } .has-edits .edit-reset { display: inline-block; } .edit-reset:hover { color: var(--cream); border-color: var(--gold-dim); } [data-theme="light"] .editable:hover { background: rgba(138, 95, 24, 0.06); box-shadow: 0 0 0 1px rgba(138, 95, 24, 0.2); } [data-theme="light"] .editable:focus { background: rgba(138, 95, 24, 0.1); box-shadow: 0 0 0 1.5px rgba(138, 95, 24, 0.4); } /* ─── Section Color Classes ──────────────────────────────────────────────── */ .sec-death { background: linear-gradient(160deg, #2a0010 0%, #7a0020 55%, #1a0008 100%); } .sec-bypass { background: linear-gradient(160deg, #12062a 0%, #3a1060 55%, #0a0018 100%); } .sec-wake { background: linear-gradient(160deg, #2a0e00 0%, #8B3A00 55%, #1a0800 100%); } .sec-body { background: linear-gradient(160deg, #001810 0%, #0a4a2a 55%, #001008 100%); } .sec-money { background: linear-gradient(160deg, #0f0a00 0%, #4a3a00 50%, #2a1a00 100%); } .sec-action { background: linear-gradient(160deg, #000a20 0%, #0a3070 55%, #000510 100%); } .sec-lead { background: linear-gradient(160deg, #0a0020 0%, #380a6a 55%, #150030 100%); } /* ─── CTA Button ─────────────────────────────────────────────────────────── */ .card-cta { margin-top: 1.5rem; padding: 1rem 1.25rem; background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.3); border-radius: var(--radius-lg); } .card-cta-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.5rem; } .card-cta-text { font-size: 0.92rem; font-weight: 600; color: var(--cream); line-height: 1.55; } [data-theme="light"] .card-cta { background: rgba(138, 95, 24, 0.08); border-color: rgba(138, 95, 24, 0.3); } /* ─── Panel CTA ──────────────────────────────────────────────────────────── */ .panel-cta { margin-top: 1rem; padding: 0.85rem 1rem; background: rgba(201, 168, 76, 0.07); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: var(--radius); } .panel-cta-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.35rem; } .panel-cta-text { font-size: 0.85rem; color: var(--cream); line-height: 1.5; } /* ─── Booklet Section Intro ──────────────────────────────────────────────── */ .booklet-section-intro { font-size: 0.88rem; color: var(--cream-dim); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic; padding: 1rem 1.25rem; border-left: 2px solid rgba(201, 168, 76, 0.3); background: rgba(201, 168, 76, 0.04); border-radius: 0 var(--radius) var(--radius) 0; } [data-theme="light"] .booklet-section-intro { border-left-color: rgba(138, 95, 24, 0.3); background: rgba(138, 95, 24, 0.04); } /* ─── Booklet Card Body ──────────────────────────────────────────────────── */ .bce-body { font-size: 0.82rem; color: var(--cream-dim); line-height: 1.7; margin-bottom: 0.5rem; display: none; } .booklet-card-entry.expanded .bce-body { display: block; } .bce-cta { margin-top: 0.65rem; padding: 0.65rem 0.85rem; background: rgba(201, 168, 76, 0.07); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: var(--radius); display: none; } .booklet-card-entry.expanded .bce-cta { display: block; } .bce-cta-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.25rem; } .bce-cta-text { font-size: 0.8rem; font-weight: 600; color: var(--cream); line-height: 1.45; } .bce-expand-btn { font-size: 0.68rem; color: var(--gold-dim); margin-top: 0.5rem; letter-spacing: 0.05em; display: inline-block; transition: color var(--transition); } .booklet-card-entry:hover .bce-expand-btn { color: var(--gold); } .booklet-card-entry.expanded .bce-expand-btn { color: var(--grey); } /* ─── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { background: var(--black); color: var(--cream); font-family: var(--font-sans); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } a { color: var(--gold); text-decoration: none; } /* ─── Screens ────────────────────────────────────────────────────────────── */ .screen { display: none; min-height: 100vh; padding-top: calc(56px + env(safe-area-inset-top, 0px)); } .screen.active { display: flex; flex-direction: column; } /* ─── Shared: Top Bar ────────────────────────────────────────────────────── */ .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; border-bottom: 1px solid rgba(201, 168, 76, 0.12); background: rgba(10, 0, 8, 0.85); backdrop-filter: blur(10px); position: sticky; top: 56px; z-index: 10; flex-shrink: 0; } .nav-back { font-size: 0.82rem; color: var(--grey); transition: color var(--transition); min-width: 60px; } .nav-back:hover { color: var(--cream); } .top-bar-title { font-family: var(--font-serif); font-size: 0.95rem; color: var(--gold); text-align: center; } .btn-action-sm { font-size: 0.78rem; color: var(--grey); min-width: 60px; text-align: right; transition: color var(--transition); } .btn-action-sm:hover { color: var(--cream); } /* ─── Shared: Truth Divider ──────────────────────────────────────────────── */ .truth-divider { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; } .truth-divider::before, .truth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(201, 168, 76, 0.15); } /* ═══════════════════════════════════════════════════════════════════════════ HOME SCREEN ═══════════════════════════════════════════════════════════════════════════ */ #screen-home { position: relative; align-items: center; justify-content: center; } .home-bg { position: fixed; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(100, 40, 180, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 50%), var(--black); z-index: 0; } .home-inner { position: relative; z-index: 1; width: 100%; max-width: 540px; padding: 3rem 1.5rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; } .home-header { text-align: center; } .dragon-mark { font-size: 3rem; display: block; margin-bottom: 1rem; filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.5)); animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .deck-title { font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; color: var(--white); line-height: 1.25; margin-bottom: 0.6rem; } .deck-title em { font-style: italic; color: var(--gold); display: block; } .deck-sub { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.35rem; } .deck-author { font-size: 0.75rem; color: var(--grey); } /* Spread list */ .spread-list { width: 100%; display: flex; flex-direction: column; gap: 0.65rem; } .spread-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.25rem; background: rgba(30, 16, 48, 0.7); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: var(--radius-lg); cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); backdrop-filter: blur(8px); text-align: left; width: 100%; } .spread-card:hover { background: rgba(45, 27, 80, 0.8); border-color: var(--gold-dim); transform: translateY(-2px); } .spread-count-bubble { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--gold); flex-shrink: 0; } .spread-info { flex: 1; } .spread-name { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 0.15rem; } .spread-desc { font-size: 0.76rem; color: var(--grey); line-height: 1.5; } .spread-arrow { color: var(--gold-dim); font-size: 0.9rem; transition: transform var(--transition); } .spread-card:hover .spread-arrow { transform: translateX(4px); } .home-footer { width: 100%; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .btn-secondary-link { font-size: 0.78rem; color: var(--grey); letter-spacing: 0.05em; padding: 0.5rem 0.25rem; transition: color var(--transition); border-bottom: 1px solid transparent; } .btn-secondary-link:hover { color: var(--cream-dim); border-bottom-color: var(--gold-dim); } /* ═══════════════════════════════════════════════════════════════════════════ READING SCREEN ═══════════════════════════════════════════════════════════════════════════ */ .reading-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; gap: 1.5rem; } .reading-instruction { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); } .cards-stage { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; width: 100%; max-width: 700px; } /* ── Oracle Card ── */ .oracle-card { perspective: 1000px; cursor: pointer; width: 130px; height: 210px; } .cards-stage[data-count="1"] .oracle-card { width: 200px; height: 320px; } .cards-stage[data-count="3"] .oracle-card { width: 160px; height: 260px; } .cards-stage[data-count="4"] .oracle-card { width: 140px; height: 228px; } .cards-stage[data-count="5"] .oracle-card { width: 120px; height: 195px; } .card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px; } .oracle-card.flipped .card-inner { transform: rotateY(180deg); } .card-face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } /* Back */ .card-back { background: radial-gradient(ellipse at 50% 42%, rgba(201,168,76,0.18) 0%, transparent 62%), linear-gradient(160deg, #2a1050 0%, #0d0420 55%, #1e0a38 100%); border: 1px solid rgba(201, 168, 76, 0.75); box-shadow: inset 0 0 28px rgba(201,168,76,0.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: 1rem; } .card-back::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201, 168, 76, 0.45); border-radius: 7px; pointer-events: none; box-shadow: inset 0 0 14px rgba(201,168,76,0.06); } /* Logo glow ring */ .card-back img { border: 2px solid rgba(201,168,76,0.7) !important; box-shadow: 0 0 14px rgba(201,168,76,0.5), 0 0 28px rgba(201,168,76,0.2) !important; } .card-back-dragon { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.5)); } .card-back-text { font-family: var(--font-serif); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #ffd84a; text-align: center; line-height: 1.7; text-shadow: 0 0 18px rgba(201,168,76,0.9), 0 0 36px rgba(201,168,76,0.4); } .card-back-tagline { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 220, 110, 0.92); text-align: center; text-shadow: 0 0 12px rgba(201,168,76,0.7); } /* Front */ .card-front { background: linear-gradient(160deg, var(--purple-mid) 0%, var(--black-mid) 60%, var(--black) 100%); border: 1px solid rgba(201, 168, 76, 0.5); transform: rotateY(180deg); display: flex; flex-direction: column; padding: 0.75rem 0.65rem; gap: 0.4rem; } .card-front::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201, 168, 76, 0.12); border-radius: 8px; pointer-events: none; } .card-front-num { font-size: 0.55rem; letter-spacing: 0.1em; color: var(--gold-dim); font-weight: 500; } .card-front-title { font-family: var(--font-serif); font-size: clamp(0.65rem, 1.8vw, 0.85rem); font-weight: 700; color: var(--white); line-height: 1.2; flex: 1; display: flex; align-items: center; } .card-front-liner { font-size: 0.55rem; font-style: italic; color: var(--gold); line-height: 1.4; } .card-tap-hint { font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(201, 168, 76, 0.4); text-align: center; margin-top: auto; } /* Card wrapper + position label */ .card-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .card-position-label { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); text-align: center; max-width: 130px; line-height: 1.3; } /* ── Detail Panel ── */ .detail-panel { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--purple-dark) 0%, var(--black-mid) 100%); border-top: 1px solid rgba(201, 168, 76, 0.4); border-radius: 20px 20px 0 0; padding: 1.5rem 2rem max(2.5rem, env(safe-area-inset-bottom)); z-index: 300; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); max-height: 85vh; overflow-y: auto; } .detail-panel.open { transform: translateY(0); } .drag-handle { width: 40px; height: 4px; background: rgba(201, 168, 76, 0.3); border-radius: 2px; margin: 0 auto 1.5rem; } .panel-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1rem; color: var(--grey); transition: color var(--transition); } .panel-close:hover { color: var(--white); } .panel-section { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.35rem; } .panel-card-num { font-size: 0.7rem; color: var(--grey); margin-bottom: 0.25rem; } .panel-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--white); margin-bottom: 0.75rem; line-height: 1.15; } .panel-liner { font-size: 1rem; font-style: italic; color: var(--gold); line-height: 1.55; } .panel-truth { font-size: 0.95rem; color: var(--cream); line-height: 1.7; } .panel-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .panel-position { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); background: rgba(201, 168, 76, 0.06); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 4px; padding: 0.35rem 0.65rem; } .btn-full-page { font-size: 0.8rem; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; padding: 0.5rem 1rem; border: 1px solid var(--gold-dim); border-radius: var(--radius); transition: background var(--transition); } .btn-full-page:hover { background: rgba(201, 168, 76, 0.1); } .panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 299; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .panel-overlay.visible { opacity: 1; pointer-events: all; } /* ═══════════════════════════════════════════════════════════════════════════ BROWSE SCREEN ═══════════════════════════════════════════════════════════════════════════ */ .browse-body { flex: 1; padding: 1.5rem; max-width: 700px; margin: 0 auto; width: 100%; } .browse-section { margin-bottom: 2rem; } .browse-section-title { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201, 168, 76, 0.12); } .browse-cards { display: flex; flex-direction: column; gap: 0.4rem; } .browse-card-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; background: rgba(20, 12, 32, 0.6); border: 1px solid rgba(201, 168, 76, 0.1); border-radius: var(--radius); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .browse-card-row:hover { background: rgba(35, 20, 55, 0.8); border-color: rgba(201, 168, 76, 0.35); } .browse-card-num { font-size: 0.7rem; color: var(--gold-dim); min-width: 24px; font-weight: 500; } .browse-card-title { font-size: 0.88rem; font-weight: 600; color: var(--white); flex: 1; } .browse-card-liner { font-size: 0.72rem; font-style: italic; color: var(--grey); } .browse-arrow { font-size: 0.7rem; color: var(--gold-dim); } .browse-card-locked { cursor: default; opacity: 0.45; background: rgba(20, 12, 32, 0.35); border-style: dashed; } .browse-card-locked:hover { background: rgba(20, 12, 32, 0.35); border-color: rgba(201, 168, 76, 0.1); } .browse-locked-label { font-size: 0.8rem; font-weight: 400; color: var(--gold-dim); flex: 1; font-style: italic; } .browse-locked-hint { font-size: 0.68rem; color: var(--grey); white-space: nowrap; } .bce-locked { opacity: 0.4; cursor: default; pointer-events: none; } .bce-locked-title { font-style: italic; font-weight: 400; color: var(--gold-dim); } /* ═══════════════════════════════════════════════════════════════════════════ CARD PAGE SCREEN ═══════════════════════════════════════════════════════════════════════════ */ #screen-card { background: radial-gradient(ellipse at 50% 0%, rgba(80, 30, 140, 0.3) 0%, transparent 60%), var(--black); } .card-page-body { flex: 1; display: flex; align-items: flex-start; gap: 2.5rem; padding: 2.5rem 2rem 1rem; max-width: 800px; margin: 0 auto; width: 100%; } /* Big card visual */ .card-page-visual { flex-shrink: 0; width: 200px; height: 320px; border-radius: 14px; background: linear-gradient(160deg, var(--purple-mid) 0%, var(--black-mid) 60%, var(--black) 100%); border: 1px solid rgba(201, 168, 76, 0.5); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.25rem 1rem; gap: 0.75rem; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(80, 30, 140, 0.2); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .card-page-visual:hover { transform: scale(1.03); box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 60px rgba(201,168,76,0.2); } .card-page-visual::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 10px; pointer-events: none; } .card-page-back-layer { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(120, 60, 200, 0.2) 0%, transparent 70%), radial-gradient(ellipse at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%); } .cpv-num { font-size: 0.65rem; letter-spacing: 0.12em; color: var(--gold-dim); font-weight: 500; position: relative; } .cpv-title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--white); line-height: 1.15; position: relative; flex: 1; } .cpv-liner { font-size: 0.68rem; font-style: italic; color: var(--gold); line-height: 1.45; position: relative; } .cpv-dragon { font-size: 1.4rem; text-align: right; position: relative; filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.3)); } /* Card text content */ .card-page-content { flex: 1; min-width: 0; } .cpc-section { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.5rem; } .cpc-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; color: var(--white); line-height: 1.1; margin-bottom: 1rem; } .cpc-body { font-size: 1rem; color: var(--cream); line-height: 1.85; margin-bottom: 1.5rem; } /* Light / Shadow tabs */ .cpc-reading-tabs { display: flex; gap: 6px; margin-bottom: 0.75rem; } .cpc-tab { flex: 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 7px 12px; border-radius: 20px; border: 1px solid rgba(201,168,76,0.2); color: var(--grey); transition: all 0.18s; } .cpc-tab.active { background: rgba(201,168,76,0.12); border-color: var(--gold); color: var(--gold); } .cpc-reading-panel { font-size: 0.95rem; line-height: 1.8; color: var(--cream); padding: 1rem 1rem 0.25rem; border-left: 2px solid rgba(201,168,76,0.3); margin-bottom: 1.5rem; font-style: italic; } /* Reflection prompt */ .cpc-prompt-wrap { margin-bottom: 1.5rem; } .cpc-prompt-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; opacity: 0.7; } .cpc-prompt { font-size: 1rem; line-height: 1.7; color: var(--cream); font-style: italic; } /* Prev / Next nav */ .card-page-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem max(1.5rem, env(safe-area-inset-bottom)); border-top: 1px solid rgba(201, 168, 76, 0.12); margin-top: auto; gap: 1rem; } .cpn-btn { display: flex; flex-direction: column; gap: 0.15rem; min-width: 100px; transition: opacity var(--transition); } .cpn-btn:disabled { opacity: 0.2; pointer-events: none; } .cpn-right { text-align: right; align-items: flex-end; } .cpn-dir { font-size: 0.72rem; color: var(--gold); letter-spacing: 0.05em; } .cpn-name { font-size: 0.78rem; font-weight: 600; color: var(--white); line-height: 1.3; } .cpn-counter { font-family: var(--font-serif); font-size: 0.85rem; color: var(--grey); text-align: center; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ BOOKLET SCREEN ═══════════════════════════════════════════════════════════════════════════ */ .booklet-body { flex: 1; max-width: 720px; margin: 0 auto; padding: 0 1.5rem 4rem; width: 100%; } /* Cover */ .booklet-cover { text-align: center; padding: 4rem 1rem 3rem; border-bottom: 1px solid rgba(201, 168, 76, 0.15); margin-bottom: 3rem; } .booklet-dragon { font-size: 2.5rem; display: block; margin-bottom: 1.5rem; filter: drop-shadow(0 0 16px rgba(201, 168, 76, 0.4)); } .booklet-cover-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 1rem; } .booklet-cover-title em { font-style: italic; color: var(--gold); } .booklet-cover-sub { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.5rem; } .booklet-cover-author { font-size: 0.9rem; color: var(--cream-dim); margin-bottom: 0.2rem; } .booklet-cover-url { font-size: 0.78rem; color: var(--grey); } /* Sections */ .booklet-section { margin-bottom: 3rem; } .booklet-section-title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--gold); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(201, 168, 76, 0.2); } /* Prose */ .booklet-prose { display: flex; flex-direction: column; gap: 1rem; } .booklet-prose p { font-size: 0.95rem; color: var(--cream); line-height: 1.75; } /* Table of contents */ .booklet-toc { display: flex; flex-direction: column; gap: 0.4rem; } .toc-row { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(201, 168, 76, 0.06); cursor: pointer; transition: color var(--transition); } .toc-row:hover { color: var(--gold); } .toc-section { font-size: 0.88rem; font-weight: 500; flex: 1; } .toc-range { font-size: 0.75rem; color: var(--grey); } .toc-arrow { font-size: 0.7rem; color: var(--gold-dim); } /* Card entries in booklet */ .booklet-cards-section { margin-bottom: 3rem; } .booklet-cards-section-header { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(201, 168, 76, 0.15); } .booklet-card-entry { padding: 1.25rem 0; border-bottom: 1px solid rgba(201, 168, 76, 0.06); cursor: pointer; transition: background var(--transition); border-radius: var(--radius); padding-left: 0.75rem; } .booklet-card-entry:hover { background: rgba(45, 27, 80, 0.3); } .bce-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; } .bce-num { font-size: 0.7rem; color: var(--gold-dim); min-width: 22px; font-weight: 500; } .bce-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--white); } .bce-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0.75rem 0; } .bce-reading-block { background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.12); border-radius: 8px; padding: 10px 12px; } .bce-reading-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; opacity: 0.8; } .bce-reading-text { font-size: 0.8rem; line-height: 1.6; color: var(--cream-dim); font-style: italic; margin: 0; } .bce-prompt-wrap { margin: 0.5rem 0 0.75rem; } .bce-prompt-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; opacity: 0.7; } .bce-prompt-text { font-size: 0.85rem; line-height: 1.65; color: var(--cream); font-style: italic; margin: 0; } .bce-open { font-size: 0.7rem; color: var(--gold-dim); margin-top: 0.5rem; letter-spacing: 0.05em; } .booklet-card-entry:hover .bce-open { color: var(--gold); } /* Spreads in booklet */ .booklet-spreads-intro { font-size: 0.9rem; color: var(--grey); margin-bottom: 1.5rem; line-height: 1.6; } .booklet-spread-entry { padding: 1.25rem; background: rgba(20, 12, 32, 0.6); border: 1px solid rgba(201, 168, 76, 0.12); border-radius: var(--radius-lg); margin-bottom: 0.75rem; } .bse-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .bse-count { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 0.95rem; color: var(--gold); flex-shrink: 0; } .bse-name { font-size: 1rem; font-weight: 600; color: var(--white); } .bse-sub { font-size: 0.75rem; color: var(--grey); } .bse-desc { font-size: 0.85rem; color: var(--cream-dim); line-height: 1.6; margin-bottom: 0.75rem; } .bse-positions { display: flex; flex-direction: column; gap: 0.3rem; } .bse-pos { font-size: 0.78rem; color: var(--grey); padding: 0.3rem 0; border-bottom: 1px dashed rgba(201, 168, 76, 0.08); display: flex; gap: 0.6rem; } .bse-pos-num { color: var(--gold-dim); min-width: 16px; } /* Closing */ .booklet-closing { text-align: center; padding: 3rem 1rem; border-top: 1px solid rgba(201, 168, 76, 0.15); } .booklet-closing-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--white); margin: 1rem 0; } .booklet-closing p { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.75; margin-bottom: 0.75rem; } /* ─── Scrollbar ──────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.2); border-radius: 2px; } /* ─── Mobile ─────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .home-inner { padding: 2rem 1.25rem; gap: 2rem; } .deck-title { font-size: 1.6rem; } .cards-stage[data-count="1"] .oracle-card { width: 180px; height: 290px; } .cards-stage[data-count="5"] .oracle-card { width: 100px; height: 162px; } .detail-panel { padding: 1.25rem 1.5rem max(2rem, env(safe-area-inset-bottom)); } .panel-title { font-size: 1.6rem; } /* Card page stacks on mobile */ .card-page-body { flex-direction: column; align-items: center; padding: 1.5rem 1.25rem 1rem; gap: 1.5rem; } .card-page-visual { width: 160px; height: 258px; } .card-page-content { width: 100%; } .cpc-title { font-size: 1.9rem; } .card-page-nav { padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)); } .cpn-btn { min-width: 80px; } .cpn-name { display: none; } .booklet-body { padding: 0 1rem 3rem; } } /* ═══════════════════════════════════════════════════════════════════════════ NEW FEATURES: Journal · Collection · Profile · Quiz · Sound ═══════════════════════════════════════════════════════════════════════════ */ /* ── Panel Journal ─────────────────────────────────────────────────────────── */ .panel-journal { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(201,168,76,0.12); } .panel-journal-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.6rem; } .panel-journal-text { width: 100%; min-height: 90px; background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.18); border-radius: 8px; padding: 0.75rem 0.9rem; color: var(--cream); font-size: 0.9rem; line-height: 1.65; font-family: var(--font-sans); resize: vertical; outline: none; transition: border-color 0.2s; } .panel-journal-text:focus { border-color: rgba(201,168,76,0.45); } .panel-journal-text::placeholder { color: var(--grey); } .panel-journal-saved { font-size: 0.72rem; color: var(--gold-dim); margin-top: 0.35rem; height: 1em; opacity: 0; transition: opacity 0.3s; } .panel-journal-saved.show { opacity: 1; } /* ── Reading Complete Bar ──────────────────────────────────────────────────── */ .reading-complete-bar { position: fixed; bottom: -80px; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem max(0.9rem, env(safe-area-inset-bottom)); background: linear-gradient(135deg, #1e0a30 0%, #0d0020 100%); border-top: 1px solid rgba(201,168,76,0.3); transition: bottom 0.4s cubic-bezier(0.34,1.56,0.64,1); } .reading-complete-bar.visible { bottom: 0; } .rcb-text { font-size: 0.85rem; color: var(--gold); letter-spacing: 0.06em; } .rcb-btn { background: var(--gold); color: #0a0008; font-size: 0.82rem; font-weight: 700; padding: 0.55rem 1.1rem; border-radius: 50px; letter-spacing: 0.04em; transition: opacity 0.2s; } .rcb-btn:hover { opacity: 0.85; } /* ── Quiz Overlay ─────────────────────────────────────────────────────────── */ .quiz-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(8,0,16,0.88); align-items: center; justify-content: center; padding: 1.25rem; backdrop-filter: blur(6px); } .quiz-overlay.open { display: flex; } .quiz-card { background: linear-gradient(160deg, #1a0a28 0%, #100020 100%); border: 1px solid rgba(201,168,76,0.3); border-radius: 18px; padding: 2rem 1.75rem; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; animation: quizSlideUp 0.35s cubic-bezier(0.34,1.3,0.64,1); } @keyframes quizSlideUp { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .quiz-step-label { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.9rem; } .quiz-question { font-family: var(--font-serif); font-size: 1.25rem; color: var(--cream); line-height: 1.45; margin-bottom: 1.5rem; font-style: italic; } .quiz-options { display: flex; flex-direction: column; gap: 0.6rem; } .quiz-option { background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.18); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.92rem; color: var(--cream); text-align: left; transition: all 0.18s; cursor: pointer; } .quiz-email-form { display: flex; flex-direction: column; gap: 0.7rem; } .quiz-email-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(201,168,76,0.3); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.95rem; color: var(--cream); outline: none; transition: border-color 0.18s; width: 100%; box-sizing: border-box; } .quiz-email-input::placeholder { color: var(--cream-dim); } .quiz-email-input:focus { border-color: var(--gold); } .quiz-email-btn { background: var(--gold); border: none; border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.95rem; font-weight: 600; color: #0a0008; cursor: pointer; transition: opacity 0.18s; } .quiz-email-btn:hover { opacity: 0.85; } .quiz-skip-email { background: none; border: none; color: var(--cream-dim); font-size: 0.8rem; cursor: pointer; text-decoration: underline; padding: 0.2rem; align-self: center; } .quiz-option:hover { background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.45); color: var(--cream); } .quiz-option.selected { background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--cream); } /* Quiz result */ .quiz-result-symbol { font-size: 2rem; margin-bottom: 0.75rem; } .quiz-result-title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--gold); font-style: italic; margin-bottom: 0.85rem; line-height: 1.3; } .quiz-result-message { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.75; margin-bottom: 1.5rem; } .quiz-result-cta { display: flex; flex-direction: column; gap: 0.65rem; } .btn-quiz-offer { background: var(--gold); color: #0a0008; font-size: 0.95rem; font-weight: 700; padding: 0.9rem; border-radius: 10px; letter-spacing: 0.03em; transition: opacity 0.2s; text-align: center; } .btn-quiz-offer:hover { opacity: 0.85; } .btn-quiz-skip { font-size: 0.8rem; color: var(--grey); text-align: center; padding: 0.4rem; transition: color 0.18s; } .btn-quiz-skip:hover { color: var(--cream-dim); } /* ── Sound Toggle Button ───────────────────────────────────────────────────── */ .sound-toggle { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 1rem); right: 1rem; z-index: 50; width: 38px; height: 38px; border-radius: 50%; background: rgba(30,10,48,0.85); border: 1px solid rgba(201,168,76,0.25); color: var(--gold-dim); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(4px); } .sound-toggle:hover { border-color: var(--gold); color: var(--gold); } .sound-toggle.on { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.12); } /* ── My Oracle Screen ─────────────────────────────────────────────────────── */ .myoracle-body { padding: 1.25rem 1.25rem 4rem; max-width: 600px; margin: 0 auto; } /* Profile card */ .profile-card { background: linear-gradient(135deg, #1e0a30 0%, #0d0020 60%, #1a0830 100%); border: 1px solid rgba(201,168,76,0.3); border-radius: 18px; padding: 1.75rem; text-align: center; position: relative; overflow: hidden; margin-bottom: 1.25rem; } .profile-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 65%); } .profile-card-empty { text-align: center; padding: 2rem 1rem; color: var(--grey); font-size: 0.9rem; line-height: 1.65; background: rgba(201,168,76,0.03); border: 1px dashed rgba(201,168,76,0.15); border-radius: 18px; margin-bottom: 1.25rem; } .profile-symbol { font-size: 2.5rem; margin-bottom: 0.75rem; position: relative; } .profile-type-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.3rem; position: relative; } .profile-type-name { font-family: var(--font-serif); font-size: 2rem; color: var(--gold); font-style: italic; margin-bottom: 0.5rem; position: relative; } .profile-tagline { font-size: 0.88rem; color: var(--cream-dim); font-style: italic; line-height: 1.55; margin-bottom: 1.25rem; position: relative; } .profile-top-section { display: inline-block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); border-radius: 20px; padding: 0.3rem 0.85rem; color: var(--gold); position: relative; } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-bottom: 1.5rem; } .stat-box { background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.14); border-radius: 12px; padding: 0.9rem 0.5rem; text-align: center; } .stat-num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold); line-height: 1; margin-bottom: 0.3rem; } .stat-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); } /* Collection */ .collection-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .collection-title { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; } .collection-count { font-size: 0.78rem; color: var(--grey); } .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.5rem; margin-bottom: 2rem; } .coll-item { aspect-ratio: 2/3; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.3rem 0.2rem; cursor: pointer; transition: transform 0.18s; position: relative; overflow: hidden; } .coll-item:hover { transform: scale(1.05); } .coll-item.unlocked { border: 1px solid rgba(201,168,76,0.25); } .coll-item.locked { background: rgba(201,168,76,0.03); border: 1px solid rgba(201,168,76,0.08); opacity: 0.45; } .coll-item-num { font-size: 0.6rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-bottom: 0.2rem; } .coll-item-symbol { font-size: 1.2rem; opacity: 0.7; margin-bottom: 0.2rem; } .coll-item-name { font-size: 0.48rem; color: rgba(255,255,255,0.7); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .coll-lock { font-size: 0.85rem; opacity: 0.3; } /* Reading history */ .history-section { margin-top: 0.5rem; } .history-title { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); font-weight: 600; margin-bottom: 0.85rem; } .history-item { background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.1); border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer; transition: border-color 0.18s; } .history-item:hover { border-color: rgba(201,168,76,0.3); } .history-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } .history-spread { font-size: 0.88rem; color: var(--cream); font-weight: 500; } .history-date { font-size: 0.72rem; color: var(--grey); } .history-cards { font-size: 0.78rem; color: var(--cream-dim); line-height: 1.45; } /* ── My Oracle CTA Banner ────────────────────────────────────────────────────── */ .myoracle-cta-banner { padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .myoracle-cta-btn { width: 100%; background: linear-gradient(135deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.06) 100%); border: 1px solid rgba(201,168,76,0.35); border-radius: 12px; padding: 0.9rem 1rem; color: var(--gold); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.18s; letter-spacing: 0.03em; } .myoracle-cta-btn:hover { background: rgba(201,168,76,0.18); border-color: var(--gold); } .myoracle-cta-done { text-align: center; font-size: 0.82rem; color: var(--gold-dim); padding: 0.5rem; } .stat-box-score { cursor: pointer; } .stat-box-score:hover { border-color: rgba(201,168,76,0.5); } /* ── Monthly Theme Banner ────────────────────────────────────────────────────── */ .home-theme-banner { display: flex; align-items: flex-start; gap: 1rem; background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.04) 100%); border: 1px solid rgba(201,168,76,0.22); border-radius: 14px; padding: 1rem 1.2rem; margin: 0 1rem 1.25rem; } .theme-banner-symbol { font-size: 1.6rem; line-height: 1; color: var(--gold); flex-shrink: 0; margin-top: 0.1rem; } .theme-banner-info { flex: 1; } .theme-banner-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.2rem; } .theme-banner-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--cream); font-style: italic; margin-bottom: 0.25rem; } .theme-banner-msg { font-size: 0.82rem; color: var(--cream-dim); line-height: 1.5; } /* ── Monthly Theme Banner (inside reading) ────────────────────────────────── */ .monthly-theme-banner { display: none; font-size: 0.72rem; color: var(--gold-dim); text-align: center; padding: 0.35rem 1rem; letter-spacing: 0.08em; } #screen-reading.active .monthly-theme-banner { display: block; } /* ── ACTIVATION Panel Section ────────────────────────────────────────────── */ .panel-activation { background: linear-gradient(135deg, rgba(130,80,200,0.08) 0%, rgba(130,80,200,0.04) 100%); border: 1px solid rgba(130,80,200,0.25); border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1.25rem; } .panel-activation-label { font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: #9a7fd1; margin-bottom: 0.35rem; } .panel-activation-module { font-family: var(--font-serif); font-size: 1rem; color: var(--cream); font-style: italic; margin-bottom: 0.4rem; } .panel-activation-text { font-size: 0.82rem; color: var(--cream-dim); line-height: 1.55; margin: 0; } /* ── Activation Score Badge ──────────────────────────────────────────────── */ .activation-score-badge { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; text-align: center; } /* ── Share Button in Complete Bar ────────────────────────────────────────── */ .rcb-share { background: none; border: 1px solid rgba(201,168,76,0.4); border-radius: 20px; padding: 0.45rem 0.9rem; color: var(--gold-dim); font-size: 0.8rem; cursor: pointer; transition: all 0.18s; white-space: nowrap; } .rcb-share:hover { border-color: var(--gold); color: var(--gold); } /* ── Intention Modal ─────────────────────────────────────────────────────── */ .intention-overlay { display: none; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; padding: 1.25rem; backdrop-filter: blur(8px); } .intention-overlay.open { display: flex; } .intention-card { background: linear-gradient(160deg, #1a0a28, #0e0018); border: 1px solid rgba(201,168,76,0.3); border-radius: 20px; padding: 2rem 1.75rem; width: 100%; max-width: 420px; text-align: center; animation: slideUp 0.35s ease; } .intention-symbol { font-size: 1.8rem; color: var(--gold); margin-bottom: 0.5rem; } .intention-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.4rem; } .intention-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--cream); margin: 0 0 0.5rem; font-style: italic; } .intention-sub { font-size: 0.85rem; color: var(--cream-dim); margin: 0 0 1.4rem; line-height: 1.55; } .intention-form { display: flex; flex-direction: column; gap: 0.7rem; } .intention-input, .intention-textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.28); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.95rem; color: var(--cream); outline: none; transition: border-color 0.18s; width: 100%; box-sizing: border-box; font-family: inherit; } .intention-textarea { resize: none; line-height: 1.5; } .intention-input::placeholder, .intention-textarea::placeholder { color: var(--cream-dim); } .intention-input:focus, .intention-textarea:focus { border-color: var(--gold); } .intention-btn { background: var(--gold); border: none; border-radius: 10px; padding: 0.9rem 1rem; font-size: 0.95rem; font-weight: 600; color: #0a0008; cursor: pointer; transition: opacity 0.18s; } .intention-btn:hover { opacity: 0.85; } .intention-skip { background: none; border: none; color: var(--cream-dim); font-size: 0.78rem; cursor: pointer; text-decoration: underline; } /* ── Light / Shadow Choice Bar ───────────────────────────────────────────── */ .ccb-overlay { display: none; position: fixed; inset: 0; z-index: 799; background: rgba(0,0,0,0.4); } .ccb-overlay.visible { display: block; } .card-choice-bar { position: fixed; bottom: -220px; left: 0; right: 0; z-index: 800; background: linear-gradient(180deg, #1a0a28, #100020); border-top: 1px solid rgba(201,168,76,0.2); padding: 1.2rem 1rem 2rem; transition: bottom 0.38s cubic-bezier(0.34,1.56,0.64,1); border-radius: 20px 20px 0 0; } .card-choice-bar.visible { bottom: 0; } .ccb-label { text-align: center; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 1rem; } .ccb-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.9rem; } .ccb-btn { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; border-radius: 14px; padding: 1rem 0.5rem; border: 1px solid; cursor: pointer; transition: all 0.2s; } .ccb-light { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.3); color: var(--gold); } .ccb-shadow { background: rgba(130,80,200,0.1); border-color: rgba(130,80,200,0.35); color: #c0a0f0; } .ccb-light:hover { background: rgba(201,168,76,0.18); border-color: var(--gold); } .ccb-shadow:hover { background: rgba(130,80,200,0.2); border-color: #9a7fd1; } .ccb-icon { font-size: 1.3rem; } .ccb-name { font-size: 1rem; font-weight: 700; } .ccb-sub { font-size: 0.7rem; opacity: 0.65; } .ccb-cancel { display: block; width: 100%; background: none; border: none; color: var(--cream-dim); font-size: 0.82rem; cursor: pointer; text-align: center; padding: 0.4rem; } /* ── Shadow Gate Modal ───────────────────────────────────────────────────── */ .shadow-gate-overlay { display: none; position: fixed; inset: 0; z-index: 960; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; padding: 1.25rem; backdrop-filter: blur(8px); } .shadow-gate-overlay.open { display: flex; } .shadow-gate-card { background: linear-gradient(160deg, #0e0018, #1a0520); border: 1px solid rgba(130,80,200,0.4); border-radius: 20px; padding: 2rem 1.75rem; width: 100%; max-width: 400px; text-align: center; animation: slideUp 0.35s ease; } .sg-symbol { font-size: 2rem; color: #9a7fd1; margin-bottom: 0.5rem; } .sg-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9a7fd1; margin-bottom: 0.4rem; } .sg-title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--cream); margin: 0 0 0.5rem; font-style: italic; } .sg-sub { font-size: 0.83rem; color: var(--cream-dim); margin: 0 0 1.4rem; line-height: 1.55; } .sg-form { display: flex; flex-direction: column; gap: 0.65rem; } .sg-input { background: rgba(130,80,200,0.08); border: 1px solid rgba(130,80,200,0.3); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.95rem; color: var(--cream); outline: none; transition: border-color 0.18s; width: 100%; box-sizing: border-box; } .sg-input::placeholder { color: var(--cream-dim); } .sg-input:focus { border-color: #9a7fd1; } .sg-btn { background: linear-gradient(135deg, #6a35b8, #9a7fd1); border: none; border-radius: 10px; padding: 0.9rem 1rem; font-size: 0.95rem; font-weight: 600; color: #fff; cursor: pointer; transition: opacity 0.18s; } .sg-btn:hover { opacity: 0.85; } .sg-skip { background: none; border: none; color: var(--cream-dim); font-size: 0.78rem; cursor: pointer; text-decoration: underline; } /* ── Panel AI Reading ────────────────────────────────────────────────────── */ .panel-ai-reading { border-radius: 14px; padding: 1.1rem 1.15rem; margin-top: 1.25rem; border: 1px solid; } .panel-ai-reading:has(.mode-light), .panel-ai-reading { border-color: rgba(201,168,76,0.25); background: rgba(201,168,76,0.05); } .panel-ai-reading:has(.mode-shadow) { border-color: rgba(130,80,200,0.3); background: rgba(130,80,200,0.06); } .panel-ai-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .panel-ai-mode-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 20px; border: 1px solid; } .panel-ai-mode-badge.mode-light { color: var(--gold); border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.1); } .panel-ai-mode-badge.mode-shadow { color: #c0a0f0; border-color: rgba(130,80,200,0.4); background: rgba(130,80,200,0.1); } .panel-ai-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); } .panel-ai-loading { font-size: 0.88rem; color: var(--cream-dim); font-style: italic; display: flex; align-items: center; gap: 0.5rem; } .ai-pulse { animation: aiPulse 1.2s ease-in-out infinite; display: inline-block; } @keyframes aiPulse { 0%,100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .panel-ai-message { font-family: var(--font-serif); font-size: 1rem; line-height: 1.7; margin: 0 0 0.5rem; } .ai-light-text { color: var(--cream); } .ai-shadow-text { color: #e0d0ff; } /* ── Shadow mode card face ───────────────────────────────────────────────── */ .oracle-card.shadow-mode .card-front { filter: brightness(0.85) saturate(0.7); } .oracle-card.shadow-mode .card-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(60,0,80,0.25); pointer-events: none; } /* ── Earn Flash ──────────────────────────────────────────────────────────── */ .earn-flash { position: fixed; top: 68px; right: 1rem; z-index: 4000; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(10,0,8,0.92); padding: 0.35rem 0.9rem; border-radius: 20px; border: 1px solid currentColor; opacity: 0; transform: translateY(-16px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; white-space: nowrap; } /* ── Rank Row (My Oracle) ────────────────────────────────────────────────── */ .rank-row { display: flex; align-items: center; gap: 1rem; background: rgba(30,16,48,0.65); border: 1px solid rgba(201,168,76,0.15); border-radius: 14px; padding: 1rem 1.25rem; margin: 0 1rem 0.5rem; } .rank-icon-big { font-size: 1.7rem; line-height: 1; flex-shrink: 0; } .rank-info { flex: 1; min-width: 0; } .rank-name-big { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--gold); } .rank-xp-text { font-size: 0.7rem; color: var(--cream-dim); margin-top: 2px; } .rank-bar-wrap { margin-top: 5px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; } .rank-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width 0.7s ease; } .solars-chip { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); border-radius: 20px; padding: 0.3rem 0.75rem; font-size: 0.8rem; color: var(--gold); } /* ── Oracle Action Buttons ───────────────────────────────────────────────── */ .oracle-action-btns { display: flex; gap: 0.55rem; padding: 0 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .oracle-action-btn { flex: 1; min-width: 120px; padding: 0.6rem 0.7rem; background: rgba(30,16,48,0.7); border: 1px solid rgba(201,168,76,0.18); border-radius: 10px; color: var(--cream); font-size: 0.77rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; } .oracle-action-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); } /* ── Rank-Up Overlay ─────────────────────────────────────────────────────── */ .rankup-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.88); display: none; align-items: center; justify-content: center; padding: 2rem; } .rankup-overlay.open { display: flex; } .rankup-card { max-width: 340px; width: 100%; text-align: center; background: linear-gradient(160deg, #1e1030 0%, #0a0008 100%); border: 1px solid rgba(201,168,76,0.35); border-radius: 20px; padding: 2.5rem 2rem; animation: rankUpPop 0.55s cubic-bezier(0.175,0.885,0.32,1.275); } @keyframes rankUpPop { from { transform: scale(0.65) translateY(50px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .rankup-icon { font-size: 3rem; line-height: 1; margin-bottom: 0.6rem; display: block; } .rankup-label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.5rem; } .rankup-name { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--gold); margin-bottom: 0.8rem; } .rankup-msg { color: var(--cream-dim); font-style: italic; font-size: 0.93rem; line-height: 1.65; margin-bottom: 1.6rem; } .rankup-btn { background: linear-gradient(135deg, #8a6e2a, #c9a84c); color: #fff; border: none; border-radius: 10px; padding: 0.75rem 2rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; } /* ── Soul Match ──────────────────────────────────────────────────────────── */ .soul-match-progress { font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.9rem; } .soul-match-question { font-family: var(--font-serif); font-size: 1.1rem; font-style: italic; color: var(--cream); line-height: 1.55; margin-bottom: 1.2rem; } .soul-match-options { display: flex; flex-direction: column; gap: 0.55rem; } .soul-match-opt { width: 100%; padding: 0.7rem 1rem; text-align: left; background: rgba(30,16,48,0.7); border: 1px solid rgba(201,168,76,0.14); border-radius: 10px; color: var(--cream); font-size: 0.87rem; cursor: pointer; transition: all 0.18s; line-height: 1.4; } .soul-match-opt:hover, .soul-match-opt.selected { border-color: var(--gold); background: rgba(201,168,76,0.12); } .soul-match-icon { font-size: 2.4rem; margin: 0.4rem 0 0.8rem; display: block; text-align: center; } .soul-match-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 0.4rem; text-align: center; } .soul-match-tagline { color: var(--cream-dim); font-style: italic; font-size: 0.88rem; margin-bottom: 1rem; text-align: center; } .soul-match-summary { color: var(--cream); font-size: 0.87rem; line-height: 1.65; margin-bottom: 1.5rem; } .soul-match-cta { display: flex; flex-direction: column; gap: 0.6rem; } /* ── Ascension Portal ────────────────────────────────────────────────────── */ .ascension-portal { position: fixed; inset: 0; z-index: 3500; background: rgba(0,0,0,0.97); display: none; align-items: center; justify-content: center; padding: 2rem; } .ascension-portal.open { display: flex; } .ascension-card { max-width: 400px; width: 100%; text-align: center; animation: ascensionReveal 1.4s ease-out; } @keyframes ascensionReveal { from { opacity: 0; transform: translateY(40px) scale(0.93); } to { opacity: 1; transform: translateY(0) scale(1); } } .ascension-symbol { font-size: 3.5rem; color: var(--gold); margin-bottom: 1rem; display: block; animation: ascPulse 2.5s ease-in-out infinite; } @keyframes ascPulse { 0%,100% { text-shadow: 0 0 20px rgba(201,168,76,0.4); } 50% { text-shadow: 0 0 70px rgba(201,168,76,0.9), 0 0 120px rgba(201,168,76,0.3); } } .ascension-whisper { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(201,168,76,0.65); margin-bottom: 0.8rem; animation: fadeInSlow 3s ease-in; } @keyframes fadeInSlow { from { opacity: 0; } to { opacity: 1; } } .ascension-rank { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--cream-dim); margin-bottom: 1.6rem; } .ascension-msg { font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; color: var(--cream); line-height: 1.75; margin: 0 auto 1rem; max-width: 340px; } .ascension-invitation { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; display: block; } .ascension-btn { display: block; padding: 0.95rem 2.5rem; border-radius: 12px; background: linear-gradient(135deg, #8a6e2a, #c9a84c, #e8c96a); color: #0a0008; font-size: 0.98rem; font-weight: 800; text-decoration: none; margin: 0 auto 1rem; letter-spacing: 0.05em; transition: transform 0.2s, box-shadow 0.2s; max-width: 250px; } .ascension-btn:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(201,168,76,0.5); } .ascension-skip { background: none; border: none; color: rgba(201,168,76,0.4); font-size: 0.73rem; cursor: pointer; text-decoration: underline; display: block; margin: 0 auto; } /* ── Book Chapter Notes ──────────────────────────────────────────────────── */ .chapter-notes-section { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(201,168,76,0.15); } .chapter-notes-label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.65rem; } .chapter-notes-textarea { width: 100%; min-height: 100px; padding: 0.85rem; background: rgba(30,16,48,0.5); border: 1px solid rgba(201,168,76,0.18); border-radius: 10px; color: var(--cream); font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; resize: vertical; transition: border-color 0.2s; } .chapter-notes-textarea:focus { outline: none; border-color: rgba(201,168,76,0.45); } .chapter-notes-save { margin-top: 0.6rem; padding: 0.45rem 1.1rem; background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.3); border-radius: 8px; color: var(--gold); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.18s; } .chapter-notes-save:hover { background: rgba(201,168,76,0.28); } .chapter-notes-saved { font-size: 0.72rem; color: var(--cream-dim); margin-left: 0.75rem; opacity: 0; transition: opacity 0.3s; } .chapter-notes-saved.visible { opacity: 1; } /* ── Overlays: always dark-mode colors regardless of page theme ─────────── */ .intention-card, .shadow-gate-card, .quiz-card, .rankup-card, .ascension-card { --cream: #f2ead8; --cream-dim: #d0c49a; --gold: #C9A84C; --gold-light: #e8c96a; --gold-dim: #8a6e2a; --grey: #a090b8; color: #f2ead8; } /* card-choice-bar has hardcoded dark bg — fix CSS-var text colors */ .card-choice-bar { --cream-dim: #d0c49a; --gold: #C9A84C; --gold-dim: #8a6e2a; --grey: #a090b8; } .intention-title, .intention-sub, .intention-input, .intention-textarea, .intention-skip, .sg-title, .sg-sub, .sg-input, .sg-skip, .quiz-question, .quiz-option, .quiz-result-message, .quiz-step-label, .rankup-label, .rankup-name, .rankup-msg, .soul-match-progress, .soul-match-icon, .soul-match-question, .soul-match-name, .soul-match-opt, .soul-match-tagline, .soul-match-summary, .ascension-msg, .ascension-whisper, .ascension-rank, .ascension-invitation, .btn-quiz-skip { color: inherit; } /* ── Card Zoom Overlay ───────────────────────────────────────────────────── */ .card-zoom-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; backdrop-filter: blur(14px); } .card-zoom-overlay.open { display: flex; } .card-zoom-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; animation: zoomIn 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); } @keyframes zoomIn { from { opacity: 0; transform: scale(0.78); } to { opacity: 1; transform: scale(1); } } .card-zoom-card { width: 240px !important; height: 385px !important; cursor: pointer; filter: drop-shadow(0 20px 60px rgba(201,168,76,0.25)); } /* starts showing the FRONT (already-flipped state) */ .card-zoom-card .card-inner { transform: rotateY(180deg); } /* when user taps to see back */ .card-zoom-card.showing-back .card-inner { transform: rotateY(0deg); } .zoom-hint { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(201,168,76,0.45); margin: 0; } .zoom-actions { display: flex; gap: 0.75rem; } .zoom-close { background: none; border: 1px solid rgba(201,168,76,0.2); border-radius: 20px; padding: 0.6rem 1.3rem; color: rgba(201,168,76,0.45); font-size: 0.82rem; cursor: pointer; transition: all 0.18s; } .zoom-close:hover { border-color: rgba(201,168,76,0.5); color: var(--gold); } .zoom-read { background: linear-gradient(135deg, #8a6e2a, #c9a84c); border: none; border-radius: 20px; padding: 0.6rem 1.5rem; color: #0a0008; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: opacity 0.18s; } .zoom-read:hover { opacity: 0.85; } /* ── Creator Mode ────────────────────────────────────────────────────────── */ .creator-overlay { display: none; position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.88); align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(12px); } .creator-overlay.open { display: flex; } .creator-panel { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: linear-gradient(160deg, #1e1030 0%, #0e0820 100%); border: 1px solid rgba(201,168,76,0.35); border-radius: 18px; padding: 1.75rem 1.5rem; animation: zoomIn 0.3s ease-out; } .creator-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; } .creator-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); margin: 0; } .creator-close { background: none; border: none; color: var(--cream-dim); font-size: 1.2rem; cursor: pointer; } .creator-section-label { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.4rem; } .creator-hint { font-size: 0.8rem; color: var(--cream-dim); margin: 0 0 0.75rem; line-height: 1.5; } .creator-hint strong { color: var(--gold); } .creator-input { display: block; width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.6rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; color: var(--cream); font-family: var(--font-sans); font-size: 0.92rem; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .creator-input:focus { border-color: rgba(201,168,76,0.5); } .creator-textarea { display: block; width: 100%; padding: 0.75rem 1rem; margin-bottom: 0.6rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; color: var(--cream); font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; resize: vertical; outline: none; box-sizing: border-box; transition: border-color 0.2s; } .creator-textarea:focus { border-color: rgba(201,168,76,0.5); } .creator-input::placeholder, .creator-textarea::placeholder { color: rgba(210,195,170,0.35); } .creator-actions { display: flex; gap: 0.75rem; margin-top: 1.2rem; justify-content: flex-end; } .creator-cancel { background: none; border: 1px solid rgba(201,168,76,0.2); border-radius: 20px; padding: 0.6rem 1.2rem; color: var(--cream-dim); font-size: 0.84rem; cursor: pointer; } .creator-save { background: linear-gradient(135deg, #8a6e2a, #c9a84c); border: none; border-radius: 20px; padding: 0.6rem 1.5rem; color: #0a0008; font-size: 0.9rem; font-weight: 700; cursor: pointer; } /* Home screen owner note */ .home-creator-note { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; padding: 0.85rem 1.1rem; color: var(--gold); font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.5rem; white-space: pre-wrap; } /* ── Creator Mode — Light Theme ─────────────────────────────────────────── */ [data-theme="light"] .creator-panel { background: linear-gradient(160deg, #f5ede0 0%, #ede0cc 100%); border-color: rgba(138, 95, 24, 0.45); } [data-theme="light"] .creator-title { color: #6a3e08; } [data-theme="light"] .creator-close { color: #6a4e8a; } [data-theme="light"] .creator-section-label { color: #8a5f18; } [data-theme="light"] .creator-hint { color: #2d1b50; } [data-theme="light"] .creator-hint strong { color: #6a3e08; } [data-theme="light"] .creator-input { background: rgba(255,255,255,0.75); border-color: rgba(138, 95, 24, 0.3); color: #1a0830; } [data-theme="light"] .creator-input:focus { border-color: rgba(138, 95, 24, 0.65); } [data-theme="light"] .creator-textarea { background: rgba(255,255,255,0.75); border-color: rgba(138, 95, 24, 0.3); color: #1a0830; } [data-theme="light"] .creator-textarea:focus { border-color: rgba(138, 95, 24, 0.65); } [data-theme="light"] .creator-input::placeholder, [data-theme="light"] .creator-textarea::placeholder { color: rgba(45, 27, 80, 0.35); } /* Light mode — all text inputs readable */ [data-theme="light"] .auth-input, [data-theme="light"] .panel-journal-text, [data-theme="light"] .quiz-email-input, [data-theme="light"] .intention-input, [data-theme="light"] .intention-textarea, [data-theme="light"] .sg-input, [data-theme="light"] .chapter-notes-textarea { background: rgba(255,255,255,0.7); border-color: rgba(138, 95, 24, 0.3); color: #1a0830; } [data-theme="light"] .auth-input::placeholder, [data-theme="light"] .panel-journal-text::placeholder, [data-theme="light"] .quiz-email-input::placeholder, [data-theme="light"] .intention-input::placeholder, [data-theme="light"] .intention-textarea::placeholder, [data-theme="light"] .sg-input::placeholder, [data-theme="light"] .chapter-notes-textarea::placeholder { color: rgba(26, 8, 48, 0.45); } [data-theme="light"] .creator-cancel { border-color: rgba(138, 95, 24, 0.3); color: #4a3060; } [data-theme="light"] .creator-intel { border-color: rgba(138, 95, 24, 0.2); } [data-theme="light"] .intel-row { border-bottom-color: rgba(45, 27, 80, 0.08); } [data-theme="light"] .intel-label { color: #6a4e8a; } [data-theme="light"] .intel-val { color: #1a0830; } /* ─── Auth Gate ──────────────────────────────────────────────────────────── */ .auth-overlay { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(160deg, var(--black) 0%, var(--purple-dark) 100%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-overlay.hidden { display: none; } .auth-card { width: 100%; max-width: 380px; background: var(--black-mid); border: 1px solid rgba(201,168,76,0.25); border-radius: var(--radius-lg); padding: 2rem 1.75rem; text-align: center; } .auth-logo-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .auth-title { font-family: var(--font-serif); font-size: 1.4rem; color: var(--gold); margin: 0 0 0.25rem; } .auth-sub { font-size: 0.85rem; color: var(--grey); margin: 0 0 1.5rem; } .auth-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border: 1px solid rgba(201,168,76,0.2); border-radius: var(--radius); overflow: hidden; } .auth-tab { flex: 1; background: transparent; border: none; padding: 0.6rem; font-size: 0.85rem; color: var(--grey); cursor: pointer; transition: var(--transition); } .auth-tab.active { background: rgba(201,168,76,0.15); color: var(--gold); } .auth-input { width: 100%; box-sizing: border-box; background: var(--black-soft); border: 1px solid rgba(201,168,76,0.2); border-radius: var(--radius); color: var(--cream); font-size: 0.95rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; outline: none; } .auth-input:focus { border-color: var(--gold-dim); } .auth-btn { width: 100%; padding: 0.85rem; margin-top: 0.25rem; background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: var(--black); font-weight: 600; font-size: 0.95rem; border: none; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .auth-btn:hover { opacity: 0.9; } .auth-error { color: #e07070; font-size: 0.8rem; min-height: 1.2rem; margin-bottom: 0.25rem; } /* ─── Oracle Consciousness ───────────────────────────────────────────────── */ .oc-panel { margin: 1.2rem 0; border: 1px solid rgba(201,168,76,0.2); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; background: rgba(201,168,76,0.04); } .oc-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; } .oc-eye { font-size: 1.1rem; color: var(--gold); } .oc-title { font-family: var(--font-serif); font-size: 0.85rem; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; } .oc-msg { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.65rem; font-size: 0.88rem; color: var(--cream-dim); line-height: 1.5; } .oc-msg:last-child { margin-bottom: 0; } .oc-icon { color: var(--gold-dim); flex-shrink: 0; margin-top: 0.1rem; } .oc-msg strong { color: var(--cream); } .oc-msg.oc-nemesis { color: #e07070; } .oc-msg.oc-nemesis .oc-icon { color: #e07070; } /* ─── Panel Oracle Memory ────────────────────────────────────────────────── */ .panel-oracle-memory { margin: 0.75rem 0; padding: 0.8rem 1rem; border-radius: var(--radius); font-size: 0.85rem; line-height: 1.5; } .om-repeat { display: block; color: var(--gold-dim); border-left: 2px solid var(--gold-dim); padding-left: 0.75rem; } .om-nemesis { display: block; color: #e07070; border-left: 2px solid #e07070; padding-left: 0.75rem; } /* ─── Nemesis Card ───────────────────────────────────────────────────────── */ .nemesis-card { box-shadow: 0 0 18px 4px rgba(220, 60, 60, 0.45), inset 0 0 0 2px rgba(220,60,60,0.35) !important; } /* ─── Annual Prophecy ────────────────────────────────────────────────────── */ .prophecy-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: #0a0008; overflow-y: auto; } .prophecy-overlay.open { display: block; } .prophecy-actions { display: flex; gap: 0.75rem; padding: 1rem 1.5rem; justify-content: flex-end; border-bottom: 1px solid rgba(201,168,76,0.15); } .prop-btn { background: var(--gold); color: var(--black); border: none; padding: 0.6rem 1.2rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; font-size: 0.9rem; } .prop-close { background: transparent; color: var(--grey); border: 1px solid rgba(255,255,255,0.1); padding: 0.6rem 1rem; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; } .prophecy-doc { max-width: 680px; margin: 0 auto; padding: 2.5rem 2rem 4rem; color: var(--cream); } .pd-cover { text-align: center; padding: 3rem 0 2.5rem; border-bottom: 1px solid rgba(201,168,76,0.2); margin-bottom: 2.5rem; } .pd-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 1.2rem; } .pd-eyebrow { font-size: 0.72rem; letter-spacing: 0.15em; color: var(--grey); text-transform: uppercase; margin-bottom: 0.5rem; } .pd-year-num { font-family: var(--font-serif); font-size: 4rem; color: var(--gold); line-height: 1; margin-bottom: 0.25rem; } .pd-headline { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; margin: 0 0 0.75rem; color: var(--cream); } .pd-for { font-size: 0.95rem; color: var(--grey); margin-bottom: 1rem; } .pd-stars { color: var(--gold); letter-spacing: 0.5rem; font-size: 0.9rem; } .pd-section { margin-bottom: 2.5rem; } .pd-section-title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--gold); margin: 0 0 1rem; border-bottom: 1px solid rgba(201,168,76,0.2); padding-bottom: 0.5rem; } .pd-narrative { font-size: 1rem; line-height: 1.8; color: var(--cream-dim); } .pd-narrative em { color: var(--cream); font-style: italic; } .pd-card-row { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .pd-card-roman { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold-dim); min-width: 2rem; } .pd-card-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--cream); margin-bottom: 0.25rem; } .pd-card-liner { font-size: 0.85rem; color: var(--grey); font-style: italic; margin-bottom: 0.5rem; } .pd-card-truth { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.6; margin-bottom: 0.4rem; } .pd-card-freq { font-size: 0.75rem; color: var(--gold-dim); } .pd-theme { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; } .pd-theme-count { color: var(--gold-dim); } .pd-cta { text-align: center; padding: 2rem; border: 1px solid rgba(201,168,76,0.25); border-radius: var(--radius-lg); background: rgba(201,168,76,0.04); } .pd-cta-symbol { color: var(--gold); font-size: 1.5rem; margin-bottom: 0.75rem; } .pd-cta p { font-size: 1rem; line-height: 1.7; color: var(--cream-dim); margin: 0 0 1rem; } .pd-cta p strong { color: var(--cream); } .pd-cta-url { color: var(--gold); font-family: var(--font-serif); font-size: 1.05rem; } .pd-footer { text-align: center; font-size: 0.75rem; color: var(--grey); margin-top: 3rem; letter-spacing: 0.05em; } /* Light mode — My Oracle screen */ [data-theme="light"] .profile-card { background: linear-gradient(135deg, #f0e8f8 0%, #e8ddf5 60%, #ede5f8 100%); border-color: rgba(138,95,24,0.3); } [data-theme="light"] .profile-card::before { background: radial-gradient(ellipse at 50% 0%, rgba(138,95,24,0.07) 0%, transparent 65%); } [data-theme="light"] .profile-card-empty { background: rgba(138,95,24,0.04); border-color: rgba(138,95,24,0.2); } [data-theme="light"] .coll-item-num { color: rgba(26,8,48,0.5); } [data-theme="light"] .coll-item-name { color: rgba(26,8,48,0.75); } /* Light mode — Soul Mirror Report (My Oracle) */ [data-theme="light"] .mirror-actions { background: rgba(245,237,224,0.95); border-bottom-color: rgba(138,95,24,0.15); } [data-theme="light"] .mirror-close { border-color: rgba(138,95,24,0.25); } [data-theme="light"] .mirror-section-block { background: rgba(255,255,255,0.6); border-color: rgba(138,95,24,0.15); } [data-theme="light"] .mirror-cover { border-bottom-color: rgba(138,95,24,0.2); } [data-theme="light"] .mirror-section-title { border-bottom-color: rgba(138,95,24,0.2); } [data-theme="light"] .mirror-closing { border-top-color: rgba(138,95,24,0.15); } /* Light mode — Annual Prophecy */ [data-theme="light"] .prophecy-overlay { background: var(--black); } [data-theme="light"] .prophecy-doc { color: var(--cream); } [data-theme="light"] .prophecy-actions { border-bottom-color: rgba(138,95,24,0.2); } [data-theme="light"] .prop-close { color: var(--grey); border-color: rgba(138,95,24,0.25); } [data-theme="light"] .pd-cover { border-bottom-color: rgba(138,95,24,0.2); } [data-theme="light"] .pd-section-title { border-bottom-color: rgba(138,95,24,0.2); } [data-theme="light"] .pd-card-row { border-bottom-color: rgba(138,95,24,0.12); } [data-theme="light"] .pd-theme { border-bottom-color: rgba(138,95,24,0.1); } [data-theme="light"] .pd-cta { background: rgba(138,95,24,0.06); border-color: rgba(138,95,24,0.25); } @media print { .no-print { display: none !important; } .prophecy-overlay { position: relative; background: white; } .prophecy-doc { color: #1a1a1a; padding: 0; } .pd-cover { border-color: #ccc; } .pd-year-num, .pd-stars, .oc-eye, .pd-cta-url { color: #8a5f18 !important; } .pd-section-title { color: #8a5f18 !important; border-color: #ccc; } .pd-narrative, .pd-card-truth, .pd-cta p { color: #333; } .pd-card-liner, .pd-card-freq, .pd-theme-count, .pd-footer { color: #666; } .pd-cta { border-color: #ccc; background: #fafafa; } } /* ══════════════════════════════════════════════════════════════════════════════ NEW FEATURES CSS ══════════════════════════════════════════════════════════════════════════════ */ /* ── Rarity Badges ────────────────────────────────────────────────────────── */ .rarity-badge { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 10px; padding: 0.12rem 0.45rem; white-space: nowrap; flex-shrink: 0; } .rarity-legendary { color: #e8c96a; background: rgba(232,201,106,0.12); border: 1px solid rgba(232,201,106,0.35); } .rarity-rare { color: #b899f5; background: rgba(184,153,245,0.1); border: 1px solid rgba(184,153,245,0.3); } .rarity-uncommon { color: #6bb8c4; background: rgba(107,184,196,0.1); border: 1px solid rgba(107,184,196,0.3); } .rarity-common { color: #7a7090; background: rgba(122,112,144,0.08); border: 1px solid rgba(122,112,144,0.25); } .cpc-rarity { margin: 0.4rem 0 0.8rem; } .browse-card-row { display: flex; align-items: center; gap: 0.65rem; } .browse-card-liner { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Somatic Practice ─────────────────────────────────────────────────────── */ .panel-somatic { margin: 1.1rem 0 0.9rem; padding: 0.9rem 1rem; background: rgba(77, 184, 184, 0.08); border: 1px solid rgba(77, 184, 184, 0.35); border-radius: var(--radius); } .somatic-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .somatic-symbol { color: #4db8b8; font-size: 1.1rem; } .somatic-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #4db8b8; } .somatic-text { font-size: 0.88rem; color: var(--cream); line-height: 1.6; } /* ── Insights Screen ──────────────────────────────────────────────────────── */ .insights-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4rem; } .insights-hero { text-align: center; padding: 2.5rem 1.5rem 1.5rem; background: radial-gradient(ellipse at 50% 0%, rgba(100, 40, 180, 0.2) 0%, transparent 65%); } .insights-hero-symbol { font-size: 2.5rem; color: var(--gold); margin-bottom: 0.75rem; } .insights-hero-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--cream); margin-bottom: 0.4rem; } .insights-hero-sub { font-size: 0.88rem; color: var(--grey); letter-spacing: 0.04em; } .insights-grid { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1rem 1.5rem; max-width: 600px; margin: 0 auto; width: 100%; } .insights-card { background: rgba(242, 232, 215, 0.97); border: 1px solid rgba(180, 140, 60, 0.4); border-radius: var(--radius-lg); overflow: hidden; } .insights-card-header { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.1rem 0.75rem; border-bottom: 1px solid rgba(180, 140, 60, 0.2); background: rgba(230, 215, 190, 0.6); } .insights-card-icon { font-size: 1.5rem; color: #8a5f18; line-height: 1; margin-top: 0.1rem; flex-shrink: 0; } .insights-card-title { font-family: var(--font-serif); font-size: 1.05rem; color: #1a0830; font-weight: 700; } .insights-card-sub { font-size: 0.72rem; color: #8a5f18; letter-spacing: 0.06em; margin-top: 0.15rem; } .insights-card-body { padding: 0.9rem 1.1rem 1.1rem; } .insights-card-desc { font-size: 0.85rem; color: #2d1b50; line-height: 1.6; margin-bottom: 0.85rem; } .insights-teaser { font-size: 0.88rem; color: #4a3060; font-style: italic; line-height: 1.6; } .insights-oc-preview { font-size: 0.88rem; color: #2d1b50; line-height: 1.6; } .insights-oc-msg { display: flex; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.85rem; color: #2d1b50; line-height: 1.6; border-bottom: 1px solid rgba(45, 27, 80, 0.1); } .insights-oc-msg:last-child { border-bottom: none; } .insights-feature-btn { margin-top: 0.25rem; padding: 0.7rem 1.2rem; background: rgba(138, 95, 24, 0.12); border: 1px solid rgba(138, 95, 24, 0.45); border-radius: 20px; color: #6a3e08; font-size: 0.85rem; font-weight: 600; transition: background var(--transition), border-color var(--transition); width: 100%; } .insights-feature-btn:hover { background: rgba(138, 95, 24, 0.22); border-color: #8a5f18; } .insights-meta { font-size: 0.72rem; color: #6a4e8a; margin-top: 0.5rem; text-align: center; } .insights-locked { font-size: 0.85rem; color: #4a3060; line-height: 1.5; margin-bottom: 0.6rem; } .insights-lock-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .insights-lock-fill { height: 100%; background: var(--gold-dim); border-radius: 2px; transition: width 0.6s ease; } /* Season card */ .insights-season-card { border-color: rgba(201, 168, 76, 0.3); } .season-icon { color: var(--gold); } .insights-season-theme { font-size: 0.88rem; color: #2d1b50; font-style: italic; line-height: 1.6; margin-bottom: 0.85rem; } .season-pts-row { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.75rem; } .season-pts-num { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; color: var(--gold); } .season-pts-label { font-size: 0.8rem; color: #6a4e8a; margin-right: 0.5rem; } .season-tier-badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.2rem 0.65rem; border-radius: 12px; } .tier-bronze { background: rgba(184,115,51,0.15); color: #cd7f32; border: 1px solid rgba(184,115,51,0.4); } .tier-silver { background: rgba(192,192,192,0.1); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.35); } .tier-gold { background: rgba(201,168,76,0.12); color: var(--gold); border: 1px solid rgba(201,168,76,0.4); } .tier-obsidian{ background: rgba(50,30,80,0.4); color: #c88fff; border: 1px solid rgba(180,120,255,0.4); } .season-bar-wrap { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 0.4rem; } .season-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); border-radius: 3px; transition: width 0.6s ease; } .season-bar-label { font-size: 0.72rem; color: #6a4e8a; margin-bottom: 1rem; } .season-bar-label.season-max { color: var(--gold); } .season-tiers { border: 1px solid rgba(138, 95, 24, 0.2); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.85rem; } .season-tier-row { font-size: 0.78rem; color: #2d1b50; padding: 0.45rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); line-height: 1.4; } .season-tier-row:last-child { border-bottom: none; } .season-earn-guide { background: rgba(138, 95, 24, 0.08); border-radius: var(--radius); padding: 0.65rem 0.85rem; } .season-earn-title { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #8a5f18; margin-bottom: 0.3rem; } .season-earn-row { font-size: 0.78rem; color: #2d1b50; line-height: 1.5; } /* ── Mirror Report Overlay ───────────────────────────────────────────────── */ .mirror-overlay { display: none; position: fixed; inset: 0; z-index: 1500; background: var(--black); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mirror-overlay.open { display: block; } .mirror-actions { position: sticky; top: 0; z-index: 10; display: flex; gap: 0.75rem; justify-content: flex-end; padding: 0.85rem 1.25rem; background: rgba(10,0,8,0.92); border-bottom: 1px solid rgba(201,168,76,0.12); backdrop-filter: blur(12px); } .mirror-btn { padding: 0.5rem 1rem; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.4); border-radius: 20px; color: var(--gold); font-size: 0.82rem; font-weight: 600; transition: background var(--transition); } .mirror-btn:hover { background: rgba(201,168,76,0.22); } .mirror-close { padding: 0.5rem 0.85rem; color: var(--grey); font-size: 0.82rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; transition: color var(--transition); } .mirror-close:hover { color: var(--cream); } .mirror-doc { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .mirror-cover { text-align: center; padding: 2.5rem 1rem 2rem; border-bottom: 1px solid rgba(201,168,76,0.2); margin-bottom: 2rem; } .mirror-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; box-shadow: 0 0 24px rgba(201,168,76,0.3); } .mirror-eyebrow { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: 0.75rem; } .mirror-headline { font-family: var(--font-serif); font-size: 2rem; font-style: italic; color: var(--cream); margin-bottom: 0.5rem; } .mirror-for { font-size: 0.9rem; color: var(--grey); margin-bottom: 1rem; } .mirror-for strong { color: var(--cream); } .mirror-stars { color: var(--gold); letter-spacing: 0.5rem; font-size: 0.8rem; } .mirror-intro { margin-bottom: 2rem; } .mirror-intro p { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.75; margin-bottom: 0.75rem; } .mirror-patterns { margin-bottom: 2rem; } .mirror-section-title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--gold); margin-bottom: 1.25rem; border-bottom: 1px solid rgba(201,168,76,0.2); padding-bottom: 0.5rem; } .mirror-section-block { margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: rgba(45,27,80,0.35); border: 1px solid rgba(201,168,76,0.12); border-radius: var(--radius); } .mirror-section-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.5rem; } .mirror-section-count { color: var(--grey); } .mirror-section-insight { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.7; } .mirror-closing { text-align: center; padding: 2rem 1rem; border-top: 1px solid rgba(201,168,76,0.15); margin-top: 1.5rem; } .mirror-closing-divider { color: var(--gold-dim); margin-bottom: 1rem; letter-spacing: 0.5rem; } .mirror-closing-text { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.75; font-style: italic; } .mirror-closing-text a { color: var(--gold); } .mirror-footer { text-align: center; font-size: 0.72rem; color: var(--grey); margin-top: 2.5rem; letter-spacing: 0.08em; } /* ── Physical Card Overlay ───────────────────────────────────────────────── */ .physical-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: radial-gradient(ellipse at 50% 40%, rgba(100, 70, 20, 0.6) 0%, rgba(10,0,8,0.98) 70%); align-items: center; justify-content: center; padding: 2rem; } .physical-overlay.open { display: flex; } .physical-card { text-align: center; max-width: 400px; width: 100%; padding: 3rem 2rem; border: 1px solid rgba(201,168,76,0.5); border-radius: var(--radius-lg); background: rgba(20,10,40,0.95); box-shadow: 0 0 80px rgba(201,168,76,0.25), 0 0 200px rgba(100,60,10,0.2); animation: physicalReveal 0.8s ease; } @keyframes physicalReveal { from { opacity: 0; transform: scale(0.88) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .physical-stars { color: var(--gold); letter-spacing: 0.4rem; font-size: 0.85rem; margin-bottom: 1.25rem; } .physical-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 1rem; } .physical-icon { font-size: 3.5rem; color: var(--gold); margin-bottom: 1.25rem; line-height: 1; text-shadow: 0 0 40px rgba(201,168,76,0.6); } .physical-text { font-size: 1rem; color: var(--cream-dim); line-height: 1.7; margin-bottom: 1.75rem; font-family: var(--font-serif); font-style: italic; } .physical-btn { display: block; padding: 0.9rem 1.5rem; background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(232,201,106,0.15)); border: 1px solid rgba(201,168,76,0.6); border-radius: 25px; color: var(--gold); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.85rem; transition: background var(--transition), box-shadow var(--transition); } .physical-btn:hover { background: rgba(201,168,76,0.3); box-shadow: 0 0 20px rgba(201,168,76,0.2); } .physical-skip { font-size: 0.78rem; color: var(--grey); transition: color var(--transition); } .physical-skip:hover { color: var(--cream); } /* ── Creator Intelligence Dashboard ─────────────────────────────────────── */ .creator-intel { border: 1px solid rgba(201,168,76,0.15); border-radius: var(--radius); overflow: hidden; margin-top: 0.5rem; } .intel-row { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem; } .intel-row:last-child { border-bottom: none; } .intel-label { color: var(--grey); } .intel-val { color: var(--cream); font-weight: 600; } /* ── Mirror print styles ─────────────────────────────────────────────────── */ @media print { .mirror-overlay { position: relative; background: white; display: block; } .mirror-doc { color: #1a1a1a; } .mirror-headline, .mirror-section-title { color: #8a5f18 !important; } .mirror-eyebrow, .mirror-label { color: #8a5f18; } .mirror-stars, .mirror-closing-divider { color: #8a5f18; } .mirror-intro p, .mirror-section-insight { color: #333; } .mirror-section-block { border-color: #ccc; background: #fafaf8; } .mirror-closing-text { color: #444; } } /* ─── Auth forgot / reset ────────────────────────────────────────────────── */ .auth-forgot { background: none; border: none; color: var(--grey); font-size: 0.8rem; cursor: pointer; margin-top: 0.5rem; text-decoration: underline; width: 100%; text-align: center; } .auth-forgot:hover { color: var(--cream); } .auth-reset-info { font-size: 0.83rem; color: var(--grey); margin-bottom: 0.75rem; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ */ /* ── DRAGON ORACLE GUIDE — ANIMATED CHARACTER ────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ */ .dragon-guide { position: fixed; bottom: 100px; right: 18px; z-index: 8500; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } .dragon-avatar { width: 105px; height: 115px; cursor: pointer; pointer-events: all; position: relative; animation: dragonFloat 6s ease-in-out infinite; transition: transform 0.3s; } .dragon-avatar:hover { transform: scale(1.08) translateY(-4px); } /* Gentle float — no lateral drift, no tilt */ @keyframes dragonFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Real dragon image */ .dragon-real-img { width: 100%; height: 100%; object-fit: contain; display: block; } /* SVG hidden */ .dragon-svg { display: none !important; } /* 3D canvas — never inherit CSS filters (prevents light-mode blur) */ .dragon-avatar canvas { filter: none !important; } @keyframes dragonBreathe { 0%,100% { filter: drop-shadow(0 0 18px rgba(201,168,76,0.7)) drop-shadow(0 2px 8px rgba(0,0,0,0.6)); } 50% { filter: drop-shadow(0 0 32px rgba(201,168,76,1.0)) drop-shadow(0 0 14px rgba(201,168,76,0.6)) drop-shadow(0 2px 8px rgba(0,0,0,0.6)); } } /* Golden aura ring underneath */ .dragon-aura { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 90px; height: 18px; background: radial-gradient(ellipse, rgba(201,168,76,0.6) 0%, transparent 70%); border-radius: 50%; animation: auraBreath 4s ease-in-out infinite; pointer-events: none; } @keyframes auraBreath { 0%,100% { opacity: 0.55; transform: translateX(-50%) scaleX(1) scaleY(1); } 20% { opacity: 0.35; transform: translateX(-50%) scaleX(0.75) scaleY(0.7); } 50% { opacity: 0.2; transform: translateX(-50%) scaleX(0.55) scaleY(0.5); } 80% { opacity: 0.35; transform: translateX(-50%) scaleX(0.75) scaleY(0.7); } } /* Golden sparkle particles */ .dragon-sparkles { position: absolute; inset: 0; pointer-events: none; } .ds { position: absolute; font-size: 0.55rem; color: #C9A84C; animation: sparkle 3s ease-in-out infinite; opacity: 0; } .ds1 { top: 15%; left: 5%; animation-delay: 0s; animation-duration: 2.8s; } .ds2 { top: 5%; right: 10%;animation-delay: 0.7s; animation-duration: 3.2s; } .ds3 { top: 40%; left: -5%; animation-delay: 1.1s; animation-duration: 2.5s; } .ds4 { top: 20%; right: 0%; animation-delay: 1.6s; animation-duration: 3.5s; } .ds5 { top: 60%; left: 8%; animation-delay: 0.4s; animation-duration: 2.9s; } .ds6 { top: 70%; right: 5%; animation-delay: 2.1s; animation-duration: 3.1s; } @keyframes sparkle { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 30% { opacity: 1; transform: translateY(-8px) scale(1.2); } 60% { opacity: 0.6; transform: translateY(-16px) scale(0.8); } 100% { opacity: 0; transform: translateY(-24px) scale(0.3); } } /* Breath flash (golden burst on tap) */ .dragon-breath-flash { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.5) 0%, transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.1s; } .dragon-breath-flash.active { animation: breathFlash 0.8s ease-out forwards; } @keyframes breathFlash { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2); } } /* Talking wiggle */ .dragon-guide.dragon-talking .dragon-real-img { animation: dragonBreathe 5s ease-in-out infinite, dragonTalkWiggle 0.4s ease-in-out 4; } @keyframes dragonTalkWiggle { 0%,100% { transform: rotate(0deg) scaleY(1); } 25% { transform: rotate(-3deg) scaleY(1.02); } 75% { transform: rotate(3deg) scaleY(1.02); } } /* ── Dragon breathe: simple glow pulse, no flipping ── */ .dragon-avatar[data-gender="female"] .dragon-real-img { animation: dragonGlowBreathe 5s ease-in-out infinite; } [data-theme="light"] .dragon-avatar[data-gender="female"] .dragon-real-img { animation: dragonGlowBreatheLight 5s ease-in-out infinite; } @keyframes dragonGlowBreathe { 0%,100% { filter: drop-shadow(0 0 12px rgba(201,168,76,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.5)); } 50% { filter: drop-shadow(0 0 28px rgba(201,168,76,1.0)) drop-shadow(0 0 12px rgba(201,168,76,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.4)); } } @keyframes dragonGlowBreatheLight { 0%,100% { filter: drop-shadow(0 0 10px rgba(201,168,76,0.45)) drop-shadow(0 3px 6px rgba(0,0,0,0.2)); } 50% { filter: drop-shadow(0 0 22px rgba(201,168,76,0.85)) drop-shadow(0 0 10px rgba(201,168,76,0.4)) drop-shadow(0 3px 6px rgba(0,0,0,0.15)); } } /* Talking: breathe glow + small wiggle */ .dragon-guide.dragon-talking .dragon-avatar[data-gender="female"] .dragon-real-img { animation: dragonGlowBreathe 5s ease-in-out infinite, dragonTalkWiggleFemale 0.4s ease-in-out 4; } @keyframes dragonTalkWiggleFemale { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg) scaleY(1.02); } 75% { transform: rotate(3deg) scaleY(1.02); } } /* Dragon voice on home screen */ .dragon-home-msg { font-family: var(--font-sans); font-size: 0.82rem; font-style: italic; font-weight: 300; color: rgba(201, 168, 76, 0.75); text-align: center; letter-spacing: 0.02em; line-height: 1.6; min-height: 1.4em; padding: 0 1rem; margin: 0 0 0.5rem; } [data-theme="light"] .dragon-home-msg { color: rgba(138, 95, 24, 0.7); } /* Old floating speech bubble — hidden */ .dragon-speech { display: none; position: relative; margin-bottom: 12px; max-width: 240px; background: linear-gradient(135deg, rgba(40, 22, 70, 1), rgba(20, 8, 35, 1)); border: 1.5px solid rgba(201,168,76,0.75); border-radius: 14px 14px 4px 14px; padding: 12px 30px 12px 14px; box-shadow: 0 0 32px rgba(201,168,76,0.3), 0 4px 20px rgba(0,0,0,0.7); pointer-events: all; animation: speechPop 0.4s cubic-bezier(0.34,1.56,0.64,1); } .dragon-speech-legacy { display: none; } @keyframes speechPop { from { opacity:0; transform: translateY(14px) scale(0.88); } to { opacity:1; transform: translateY(0) scale(1); } } .dragon-speech::after { content:''; position: absolute; bottom: -9px; right: 32px; border-left: 9px solid transparent; border-top: 9px solid rgba(201,168,76,0.5); } .dragon-speech-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.88rem; color: #fff; line-height: 1.6; font-style: italic; font-weight: 300; letter-spacing: 0.01em; } .dragon-speech-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--grey); font-size: 0.68rem; cursor: pointer; padding: 2px 4px; } .dragon-speech-close:hover { color: var(--gold); } /* Dragon speech — light mode */ [data-theme="light"] .dragon-speech { background: linear-gradient(135deg, #f5ede0, #ede0cc); border-color: rgba(138, 95, 24, 0.7); box-shadow: 0 0 24px rgba(138, 95, 24, 0.2), 0 4px 16px rgba(0,0,0,0.12); } [data-theme="light"] .dragon-speech::after { border-top-color: rgba(138, 95, 24, 0.6); } [data-theme="light"] .dragon-speech-text { color: #1a0830; } [data-theme="light"] .dragon-speech-close { color: #8a5f18; } [data-theme="light"] .dragon-speech-close:hover { color: #4a2a08; } /* ═══════════════════════════════════════════════════════════════════════════ EPIC FEATURE PACK — Dragon Evolution · Quests · Constellation · Mastery Trial · Lead Engine · Mirror Moment · Share Card · Milestones · Dungeon ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. DRAGON EVOLUTION ────────────────────────────────────────────────── */ .dragon-avatar[data-rank-level="0"] .dragon-aura { box-shadow: 0 0 20px rgba(201,168,76,0.25); } .dragon-avatar[data-rank-level="1"] .dragon-aura { box-shadow: 0 0 30px rgba(201,168,76,0.45); } .dragon-avatar[data-rank-level="2"] .dragon-aura { box-shadow: 0 0 40px rgba(201,168,76,0.6), 0 0 80px rgba(201,168,76,0.2); } .dragon-avatar[data-rank-level="3"] .dragon-aura { box-shadow: 0 0 55px rgba(201,168,76,0.75), 0 0 120px rgba(201,168,76,0.3); } .dragon-avatar[data-rank-level="4"] .dragon-aura { box-shadow: 0 0 70px rgba(201,168,76,0.9), 0 0 160px rgba(201,168,76,0.4), 0 0 240px rgba(201,168,76,0.15); } .dragon-avatar[data-rank-level="4"] .dragon-sparkles .ds { animation-duration: 1.2s !important; } .dragon-ceremony { animation: dragonCeremony 3.5s ease; } @keyframes dragonCeremony { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.25) rotate(-5deg); } 40% { transform: scale(1.3) rotate(5deg); } 60% { transform: scale(1.2) rotate(-3deg); } 80% { transform: scale(1.1) rotate(2deg); } 100% { transform: scale(1) rotate(0deg); } } /* ── 2. WEEKLY QUESTS ───────────────────────────────────────────────────── */ #home-quests { margin: 0 0 1.4rem; } .hq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; } .hq-title { font-family: var(--font-serif); font-size: 1rem; color: var(--gold); } .hq-week { font-size: 0.7rem; color: var(--grey); } .hq-list { display: flex; flex-direction: column; gap: 0.5rem; } .hq-item { display: flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.12); border-radius: 10px; padding: 0.6rem 0.8rem; } .hq-item.hq-done { opacity: 0.5; background: rgba(201,168,76,0.06); } .hq-item.hq-ready { border-color: var(--gold); background: rgba(201,168,76,0.1); animation: hqPulse 2s ease-in-out infinite; } @keyframes hqPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}50%{box-shadow:0 0 0 4px rgba(201,168,76,0.2)} } .hq-icon { font-size: 1.1rem; } .hq-info { flex: 1; min-width: 0; } .hq-name { font-size: 0.82rem; font-weight: 600; color: var(--cream); } .hq-desc { font-size: 0.7rem; color: var(--grey); margin-top: 1px; } .hq-xp { font-size: 0.75rem; color: var(--gold); font-weight: 700; white-space: nowrap; } /* ── TOAST (shared by quests, milestones, dungeon) ─────────────────────── */ .feat-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(30px); display: flex; align-items: center; gap: 0.8rem; background: linear-gradient(135deg, var(--purple-dark), var(--purple-mid)); border: 1px solid var(--gold); border-radius: 14px; padding: 0.8rem 1.2rem; z-index: 9999; max-width: 320px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .feat-toast.ft-show { opacity: 1; transform: translateX(-50%) translateY(0); } .ft-icon { font-size: 1.4rem; flex-shrink: 0; } .ft-body { flex: 1; min-width: 0; } .ft-label { font-size: 0.68rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; } .ft-name { font-size: 0.88rem; font-weight: 600; color: var(--cream); } .ft-reward { font-size: 0.72rem; color: var(--gold); font-weight: 700; white-space: nowrap; } /* ── 3. SOUL CONSTELLATION ──────────────────────────────────────────────── */ .cs-panel { max-width: 560px; } .cs-sub { font-size: 0.82rem; color: var(--grey); margin: -0.4rem 0 1rem; text-align: center; } .cs-grid { display: flex; flex-direction: column; gap: 1.4rem; } .cs-section {} .cs-sec-label { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem; } .cs-stars { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cs-star { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; } .cs-lit { background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.5); } .cs-dim { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); cursor: default; } .cs-lit:hover { transform: scale(1.15); } .cs-sym { font-size: 0.95rem; } .cs-lit .cs-sym { color: var(--gold); } .cs-dim .cs-sym { color: rgba(255,255,255,0.2); } .cs-mbadge { position: absolute; bottom: -4px; right: -4px; font-size: 0.5rem; color: var(--gold); background: var(--black-mid); border-radius: 50%; padding: 1px 2px; } .cs-star.cs-m3 .cs-sym { color: var(--gold-light); filter: drop-shadow(0 0 4px rgba(201,168,76,0.8)); } .cs-star.cs-m2 .cs-sym { color: #aaa9ad; } .cs-star.cs-m1 .cs-sym { color: #cd7f32; } /* ── 4. CARD MASTERY PANEL ──────────────────────────────────────────────── */ #panel-mastery-container { margin: 1rem 0 0; } .mastery-panel { border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 0.5rem; } .mp-1 { background: rgba(205,127,50,0.12); border: 1px solid rgba(205,127,50,0.3); } .mp-2 { background: rgba(170,169,173,0.12); border: 1px solid rgba(170,169,173,0.3); } .mp-3 { background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.4); } .mp-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .mp-icon { font-size: 1rem; } .mp-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 600; } .mp-truth { font-size: 0.85rem; color: var(--cream); line-height: 1.6; font-style: italic; margin: 0; } .mastery-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 0.4rem; } /* ── 5. 30-DAY DRAGON TRIAL ─────────────────────────────────────────────── */ .trial-panel { max-width: 540px; } .trial-intro { text-align: center; padding: 1rem 0; } .trial-sym { font-size: 3rem; margin-bottom: 0.5rem; } .trial-h { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold); margin-bottom: 0.5rem; } .trial-p { font-size: 0.88rem; color: var(--grey); line-height: 1.6; margin-bottom: 1.2rem; } .trial-rewards { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 1.2rem; } .tr-item { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.25rem 0; } .tr-item span { color: var(--grey); } .tr-item strong { color: var(--gold); } .trial-start-btn { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #0a0008; border: none; border-radius: 10px; padding: 0.75rem 1.8rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; } .trial-progress { margin-bottom: 1rem; } .trial-bar-wrap { background: rgba(255,255,255,0.08); border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 0.3rem; } .trial-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 4px; transition: width 0.6s ease; } .trial-bar-label { font-size: 0.72rem; color: var(--grey); } .trial-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1.2rem; } .tdd { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; cursor: default; } .tdd-done { background: var(--gold); color: #0a0008; } .tdd-today { background: rgba(201,168,76,0.2); border: 2px solid var(--gold); color: var(--gold); } .tdd-lock { background: rgba(255,255,255,0.05); color: var(--grey); } .tdd-miss { background: rgba(255,255,255,0.08); color: var(--grey); } .trial-today { background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.2); border-radius: 12px; padding: 1.1rem; } .trial-today.trial-done { opacity: 0.7; } .trial-day-lbl { font-size: 0.72rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; } .trial-card-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--cream); margin-bottom: 0.5rem; } .trial-prompt-text { font-size: 0.85rem; color: var(--grey); line-height: 1.6; margin-bottom: 0.8rem; } .trial-journal { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 0.6rem 0.8rem; color: var(--cream); font-family: var(--font-sans); font-size: 0.85rem; resize: vertical; min-height: 80px; margin-bottom: 0.7rem; } .trial-complete-btn { background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #0a0008; border: none; border-radius: 8px; padding: 0.6rem 1.2rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; } .trial-done-msg { color: var(--gold); font-size: 0.88rem; font-style: italic; } .trial-fin { text-align: center; color: var(--gold); font-family: var(--font-serif); font-size: 1rem; padding: 1.5rem 0; } /* trial complete overlay */ .trial-done-overlay .feat-panel { text-align: center; max-width: 400px; } .tc-panel { padding: 2.5rem 1.5rem; } .tc-sym { font-size: 3.5rem; margin-bottom: 0.7rem; } .tc-title { font-family: var(--font-serif); font-size: 1.8rem; color: var(--gold); margin-bottom: 0.8rem; } .tc-msg { font-size: 0.9rem; color: var(--grey); line-height: 1.7; margin-bottom: 1rem; } .tc-rewards { font-size: 0.82rem; color: var(--gold); font-weight: 700; margin-bottom: 1.5rem; } .tc-btn { display: block; background: linear-gradient(135deg,var(--gold),var(--gold-dim)); color:#0a0008; text-decoration:none; border-radius:10px; padding:0.8rem 1.5rem; font-weight:700; font-size:0.9rem; margin-bottom:0.7rem; } .tc-skip { background:none; border:none; color:var(--grey); font-size:0.82rem; cursor:pointer; text-decoration:underline; } /* ── 6. LEAD CTA ────────────────────────────────────────────────────────── */ #lead-cta-container { margin: 1.2rem 0; } .lead-cta { border-radius: 14px; border: 1px solid rgba(201,168,76,0.25); padding: 1.2rem; background: rgba(255,255,255,0.03); } .lead-high { border-color: var(--gold); background: rgba(201,168,76,0.08); } .lead-lbl { font-size: 0.72rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .lead-text { font-size: 0.88rem; color: var(--cream); line-height: 1.6; margin-bottom: 0.9rem; } .lead-acts { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; } .lead-btn { background: linear-gradient(135deg,var(--gold),var(--gold-dim)); color:#0a0008; text-decoration:none; border-radius:8px; padding:0.55rem 1.1rem; font-size:0.82rem; font-weight:700; } .lead-dim { background:none; border:none; color:var(--grey); font-size:0.78rem; cursor:pointer; text-decoration:underline; } /* ── 7. MIRROR MOMENT ───────────────────────────────────────────────────── */ .mm-overlay .feat-panel { text-align: center; max-width: 420px; } .mm-panel { padding: 2.5rem 1.5rem; } .mm-symbol { font-size: 3rem; margin-bottom: 0.5rem; } .mm-eyes { font-family: var(--font-serif); font-size: 0.85rem; color: var(--grey); font-style: italic; margin-bottom: 1.2rem; } .mm-stat-row { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.2rem; } .mm-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .mm-num { font-size: 1.8rem; font-weight: 700; color: var(--gold); font-family: var(--font-serif); } .mm-lbl { font-size: 0.68rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; } .mm-type-line { font-size: 1rem; color: var(--cream); margin-bottom: 0.3rem; } .mm-section-line { font-size: 0.82rem; color: var(--grey); margin-bottom: 1rem; font-style: italic; } .mm-msg { font-size: 0.88rem; color: var(--grey); line-height: 1.7; margin-bottom: 1.4rem; } .mm-cta { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; } .mm-btn { display: inline-block; background: linear-gradient(135deg,var(--gold),var(--gold-dim)); color:#0a0008; text-decoration:none; border-radius:10px; padding:0.8rem 1.8rem; font-size:0.9rem; font-weight:700; } .mm-skip { background:none; border:none; color:var(--grey); font-size:0.82rem; cursor:pointer; text-decoration:underline; } /* ── 8. SHARE ORACLE CARD ───────────────────────────────────────────────── */ .feat-share-btn { display: block; width: calc(100% - 2rem); margin: 0 1rem 1.2rem; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); color: var(--gold); border-radius: 10px; padding: 0.65rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; letter-spacing: 0.04em; transition: background 0.2s; } .feat-share-btn:hover { background: rgba(201,168,76,0.18); } .sc-panel { max-width: 380px; } .sc-card { background: linear-gradient(160deg, #1e1030, #0a0008); border: 1px solid rgba(201,168,76,0.4); border-radius: 16px; padding: 1.5rem; margin-bottom: 1rem; } .sc-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; } .sc-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .sc-brand { font-size: 0.75rem; font-weight: 700; color: var(--cream); } .sc-url { font-size: 0.62rem; color: var(--grey); } .sc-symbol { font-size: 3rem; text-align: center; margin-bottom: 0.3rem; color: var(--gold); } .sc-type-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); text-align: center; } .sc-type-name { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold); text-align: center; margin-bottom: 0.4rem; } .sc-tagline { font-size: 0.8rem; color: var(--grey); text-align: center; font-style: italic; margin-bottom: 1.2rem; } .sc-stats-row { display: flex; justify-content: space-around; border-top: 1px solid rgba(201,168,76,0.15); padding-top: 0.8rem; margin-bottom: 0.8rem; } .sc-s { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .sc-n { font-size: 1.3rem; font-weight: 700; color: var(--cream); } .sc-l { font-size: 0.6rem; color: var(--grey); text-transform: uppercase; } .sc-stage { font-size: 0.72rem; color: var(--gold-dim); text-align: center; } .sc-hint { font-size: 0.78rem; color: var(--grey); text-align: center; font-style: italic; margin-bottom: 0.8rem; } .sc-close { display: block; width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--grey); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; cursor: pointer; } /* ── 9. MILESTONE BOARD ─────────────────────────────────────────────────── */ #milestone-board { margin: 1.2rem 0; } .mb-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; padding: 0 0.2rem; } .mb-title { font-family: var(--font-serif); font-size: 1rem; color: var(--gold); } .mb-count { font-size: 0.75rem; color: var(--grey); } .mb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .mb-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.7rem 0.4rem; text-align: center; } .mb-on { border-color: rgba(201,168,76,0.3); background: rgba(201,168,76,0.06); } .mb-off { opacity: 0.4; } .mb-icon { font-size: 1.2rem; } .mb-name { font-size: 0.6rem; color: var(--cream); line-height: 1.3; font-weight: 500; } .mb-off .mb-name { color: var(--grey); } /* ── 10. SHADOW DUNGEON ─────────────────────────────────────────────────── */ .dg-overlay .feat-panel { max-width: 500px; } .dg-intro { text-align: center; padding: 0.5rem 0 1.2rem; } .dg-sym { font-size: 2.5rem; margin-bottom: 0.5rem; } .dg-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--cream); margin-bottom: 0.5rem; } .dg-sub { font-size: 0.85rem; color: var(--grey); line-height: 1.6; } .dg-spreads { display: flex; flex-direction: column; gap: 0.8rem; } .dg-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1rem; } .dg-name { font-family: var(--font-serif); font-size: 1rem; color: var(--cream); margin-bottom: 0.2rem; } .dg-sub2 { font-size: 0.68rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .dg-desc { font-size: 0.82rem; color: var(--grey); line-height: 1.5; margin-bottom: 0.8rem; } .dg-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: var(--cream); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.82rem; cursor: pointer; transition: background 0.2s; } .dg-btn:hover { background: rgba(255,255,255,0.14); } .dg-toast {} /* ── SHARED OVERLAY SHELL ───────────────────────────────────────────────── */ .feat-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(10,0,8,0.92); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .feat-overlay.open { opacity: 1; pointer-events: all; } .feat-panel { background: linear-gradient(160deg, var(--purple-dark) 0%, var(--black-mid) 100%); border: 1px solid rgba(201,168,76,0.25); border-radius: 20px; padding: 1.5rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; } .feat-panel-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .feat-panel-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--gold); margin: 0; } .feat-panel-close { background: none; border: none; color: var(--grey); font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .feat-panel-close:hover { color: var(--cream); background: rgba(255,255,255,0.08); } /* ── LIGHT MODE overrides for features ─────────────────────────────────── */ [data-theme="light"] .hq-item { background: rgba(0,0,0,0.04); border-color: rgba(138,95,24,0.2); } [data-theme="light"] .hq-item.hq-ready { border-color: var(--gold); background: rgba(138,95,24,0.1); } [data-theme="light"] .hq-name { color: var(--cream); } [data-theme="light"] .feat-overlay { background: rgba(240,230,215,0.94); } [data-theme="light"] .feat-panel { background: linear-gradient(160deg, #ede5f8, #f5ede0); border-color: rgba(138,95,24,0.3); } [data-theme="light"] .feat-panel-title { color: var(--gold); } [data-theme="light"] .feat-panel-close { color: var(--grey); } [data-theme="light"] .cs-lit { background: rgba(138,95,24,0.12); border-color: rgba(138,95,24,0.4); } [data-theme="light"] .cs-dim { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .mastery-panel { } [data-theme="light"] .mp-truth { color: var(--cream); } [data-theme="light"] .trial-journal { background: rgba(255,255,255,0.7); border-color: rgba(138,95,24,0.3); color: #1a0830; } [data-theme="light"] .lead-cta { background: rgba(0,0,0,0.03); border-color: rgba(138,95,24,0.2); } [data-theme="light"] .lead-high { background: rgba(138,95,24,0.08); border-color: var(--gold); } [data-theme="light"] .lead-text { color: var(--cream); } [data-theme="light"] .dg-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .mb-item { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); } [data-theme="light"] .mb-on { border-color: rgba(138,95,24,0.35); background: rgba(138,95,24,0.07); } [data-theme="light"] .sc-card { background: linear-gradient(160deg,#ede5f8,#ddd0f5); } [data-theme="light"] .feat-toast { background: linear-gradient(135deg,#ede5f8,#f5ede0); border-color: var(--gold); } [data-theme="light"] .ft-name { color: var(--cream); } /* ══════════════════════════════════════════════════════════════════════════ BOOK VIEWER — Realistic Page-Flip Booklet ══════════════════════════════════════════════════════════════════════════ */ .book-viewer-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(6, 2, 14, 0.97); display: none; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .book-viewer-overlay.open { display: flex; opacity: 1; } .book-viewer-inner { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100dvh; align-items: center; justify-content: space-between; padding: 0.5rem 1rem 0.75rem; box-sizing: border-box; } /* ── Header ── */ .bv-header { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 920px; padding: 0.35rem 0; flex-shrink: 0; } .bv-book-title { font-family: var(--font-serif); font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; } .bv-page-num { font-size: 0.72rem; color: var(--grey); letter-spacing: 0.04em; min-width: 90px; text-align: right; } .bv-close-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.4); color: #f0e8d8; font-size: 0.78rem; padding: 5px 14px; border-radius: 6px; cursor: pointer; letter-spacing: 0.03em; transition: all 0.15s; font-weight: 500; } .bv-close-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.65); color: #fff; } /* ── Footer nav ── */ .bv-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 920px; padding: 0.5rem 0 0; flex-shrink: 0; } .bv-nav-btn { background: none; border: 1px solid rgba(255,255,255,0.18); color: var(--cream); font-size: 0.82rem; padding: 7px 20px; border-radius: 8px; cursor: pointer; letter-spacing: 0.04em; font-family: var(--font-serif); transition: all 0.15s; } .bv-nav-btn:hover:not(:disabled) { background: rgba(201,168,76,0.12); border-color: var(--gold); color: var(--gold); } .bv-nav-btn:disabled { opacity: 0.22; cursor: not-allowed; } /* ── 3D Book Stage ── */ .book-3d { position: relative; flex: 1; width: 100%; max-width: 920px; display: flex; align-items: center; justify-content: center; perspective: 1400px; } .book-stage { position: relative; display: flex; align-items: stretch; height: min(590px, calc(100dvh - 150px)); width: 100%; max-width: 880px; box-shadow: 0 40px 90px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,168,76,0.07); border-radius: 4px 14px 14px 4px; } /* ── Pages ── */ .bl-page { flex: 1; min-height: 0; position: relative; overflow-y: auto; overflow-x: hidden; background: #f8f2e6; color: #1a0c2e; font-family: var(--font-serif); } .bl-left { border-radius: 4px 0 0 4px; box-shadow: inset -6px 0 18px rgba(0,0,0,0.15), -3px 0 10px rgba(0,0,0,0.35); } .bl-right { border-radius: 0 4px 4px 0; box-shadow: inset 3px 0 10px rgba(0,0,0,0.07), 3px 0 10px rgba(0,0,0,0.3); } /* ── Spine ── */ .book-spine { width: 12px; flex-shrink: 0; position: relative; z-index: 2; background: linear-gradient(to right, #b08040 0%, #f0d898 35%, #e8c870 55%, #a07030 100%); box-shadow: 0 0 12px rgba(0,0,0,0.5), inset 0 0 4px rgba(255,255,255,0.2); } /* ── Click zones ── */ .bv-click-left, .bv-click-right { position: absolute; top: 0; bottom: 0; width: 32%; cursor: pointer; z-index: 10; } .bv-click-left { left: 0; } .bv-click-right { right: 0; } /* ── Corner lift hint ── */ .bp-corner-lift { position: absolute; bottom: 0; right: 0; width: 44px; height: 44px; cursor: pointer; z-index: 5; } .bp-corner-lift::after { content: ''; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 0 0 28px 28px; border-color: transparent transparent rgba(201,168,76,0.2) transparent; transition: border-width 0.2s, border-color 0.2s; } .bp-corner-lift.lift-active::after { border-width: 0 0 44px 44px; border-color: transparent transparent rgba(201,168,76,0.5) transparent; } /* ── Flip Page ── */ .bl-flip-page { position: absolute; top: 0; bottom: 0; width: calc(50% - 6px); transform-style: preserve-3d; z-index: 20; pointer-events: none; } .bl-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #f8f2e6; overflow: hidden; color: #1a0c2e; font-family: var(--font-serif); } .bl-flip-back { transform: rotateY(180deg); box-shadow: inset 4px 0 16px rgba(0,0,0,0.12); } .bl-flip-front { box-shadow: -6px 0 18px rgba(0,0,0,0.25); } /* Shadow cast during flip */ .pg-shadow-active { position: relative; } .pg-shadow-active::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 65%); } #bl-right.pg-shadow-active::after { background: linear-gradient(to left, rgba(0,0,0,0.45) 0%, transparent 65%); } /* ── Mobile Single Page ── */ .bl-single-wrap { flex: 1; width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: center; } .bl-single { width: 100%; height: min(590px, calc(100dvh - 150px)); background: #f8f2e6; color: #1a0c2e; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,0.65); overflow: hidden; font-family: var(--font-serif); } /* ══════════════════════════════════════════════════════════════════════════ PAGE CONTENT — .bp-* classes ══════════════════════════════════════════════════════════════════════════ */ .bp-content { min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding: 1.4rem 1.3rem; } /* ── Cover ── */ .bp-content.bp-is-cover { background: linear-gradient(160deg, #1a0830 0%, #0d0420 50%, #1a0830 100%); color: #f0d898; align-items: center; justify-content: center; text-align: center; padding: 2.2rem 1.8rem; } .bp-cover-logo { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; margin-bottom: 0.9rem; border: 2px solid rgba(201,168,76,0.7); } .bp-cover-title { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: #ffffff; margin: 0.4rem 0; line-height: 1.3; } .bp-cover-title em { display: block; font-style: italic; color: #ffd84a; } .bp-cover-sub { font-size: 0.88rem; color: #f5ecd8; margin: 0.35rem 0; letter-spacing: 0.04em; } .bp-cover-rule { width: 55px; height: 1px; background: #ffd84a; margin: 0.9rem auto; opacity: 0.7; } .bp-cover-author { font-size: 0.88rem; color: #f0e4cc; font-style: italic; margin: 0.2rem 0; } .bp-cover-url { font-size: 0.78rem; color: #d8c898; letter-spacing: 0.07em; margin: 0.2rem 0; } .bp-orn { font-size: 0.72rem; color: #f0c840; letter-spacing: 0.18em; opacity: 0.9; margin: 0.55rem 0; } /* ── Endpaper ── */ .bp-content.bp-is-endpaper { background: linear-gradient(135deg, #130828 0%, #1e0f3a 100%); padding: 0; } .bp-endpaper { width: 100%; height: 100%; position: relative; overflow: hidden; } .bp-ep-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(201,168,76,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.06) 1px, transparent 1px); background-size: 24px 24px; } .bp-ep-grid::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.5rem; color: rgba(201,168,76,0.08); } /* ── Text page ── */ .bp-text-page { width: 100%; height: 100%; display: flex; flex-direction: column; } .bp-page-label { font-family: var(--font-serif); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7a5020; margin-bottom: 0.4rem; } .bp-divider-orn { font-size: 0.8rem; color: #c8a060; margin-bottom: 0.7rem; opacity: 0.75; } .bp-body-text p { font-size: 0.92rem; line-height: 1.72; color: #1a0830; margin: 0 0 0.7rem; } .bp-body-text strong { color: #0d0420; } .bp-body-text em { color: #5a2878; font-style: italic; } .bp-sig { margin-top: auto; font-style: italic; color: #7a5018; font-size: 0.88rem; } .bp-footer-orn { margin-top: auto; text-align: center; color: #c8a060; opacity: 0.4; font-size: 1rem; } /* ── Quote page ── */ .bp-quote-page { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem 0; } .bp-big-q { font-family: var(--font-serif); font-size: 5.5rem; color: #c8a060; opacity: 0.18; line-height: 0.55; margin-bottom: 1.1rem; } .bp-qt-text { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; color: #1a0830; line-height: 1.7; max-width: 86%; margin: 0 auto 0.8rem; } .bp-qt-attr { font-size: 0.8rem; color: #7a5018; letter-spacing: 0.05em; } /* ── Table of Contents ── */ .bp-toc { display: flex; flex-direction: column; gap: 0.32rem; margin-top: 0.15rem; } .bp-toc-row { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.84rem; border-bottom: 1px dotted rgba(138,96,48,0.22); padding-bottom: 0.22rem; } .bp-toc-n { color: #7a5020; font-variant-numeric: tabular-nums; min-width: 1.6rem; font-size: 0.76rem; } .bp-toc-name { flex: 1; color: #1a0830; font-size: 0.84rem; } .bp-toc-count { color: #7a5020; font-size: 0.76rem; } .bp-toc-spreads .bp-toc-name { font-style: italic; } .bp-toc-clickable { cursor: pointer; transition: background 0.15s; border-radius: 3px; padding-left: 0.3rem; } .bp-toc-clickable:hover { background: rgba(138,96,48,0.10); } .bp-toc-clickable:hover .bp-toc-name { color: #6b2fa0; text-decoration: underline; } .bp-toc-clickable:hover .bp-toc-n { color: #6b2fa0; } /* ── Section header ── */ .bp-content.bp-is-section { background: linear-gradient(160deg, #1a0830 0%, #0d0420 50%, #1a0830 100%); color: #f0d898; align-items: center; justify-content: center; text-align: center; } .bp-sec-header { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; } .bp-sh-sym { font-size: 1.9rem; color: var(--gold); opacity: 0.65; } .bp-sh-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: #f0d898; margin: 0; line-height: 1.3; } .bp-sh-range { font-size: 0.62rem; color: rgba(240,216,152,0.45); letter-spacing: 0.1em; text-transform: uppercase; } .bp-sh-line { width: 48px; height: 1px; background: rgba(201,168,76,0.35); margin-top: 0.3rem; } /* ── Section intro ── */ .bp-sec-intro-page { justify-content: center; } .bp-sec-intro-text { font-size: 0.93rem; font-style: italic; color: #1a0830; line-height: 1.72; text-align: center; margin-top: 0.4rem; } /* ── Card page ── */ .bp-card-page { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; position: relative; } .bp-cp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(138,96,48,0.22); } .bp-cp-num { font-size: 0.75rem; color: #7a5020; font-variant-numeric: tabular-nums; font-weight: 600; } .bp-cp-sec { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7a5020; } .bp-cp-icon { font-size: 0.9rem; color: #c8a060; opacity: 0.75; } .bp-cp-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: #0d0420; margin: 0 0 0.55rem; line-height: 1.2; letter-spacing: 0.01em; } .bp-cp-liner { font-size: 0.85rem; font-style: italic; color: #5a2878; margin: 0 0 0.5rem; line-height: 1.5; } .bp-cp-body { font-size: 0.9rem; color: #1a0830; line-height: 1.75; margin: 0 0 0.7rem; } .bp-cp-divider { font-size: 0.68rem; letter-spacing: 0.14em; color: #9a6828; text-align: center; margin: 0.65rem 0 0.5rem; opacity: 0.85; } .bp-cp-truth { font-size: 0.9rem; color: #1a0830; line-height: 1.72; margin: 0 0 0.5rem; } .bp-cp-readings { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.65rem; } .bp-cp-reading { padding: 0.45rem 0.6rem; background: rgba(138,96,48,0.06); border-radius: 4px; } .bp-reading-lbl { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em; color: #8a5818; font-weight: 600; display: block; margin-bottom: 0.2rem; } .bp-cp-reading p { font-size: 0.88rem; color: #1a0830; line-height: 1.65; margin: 0; } .bp-cp-prompt { margin: 0.5rem 0 0.65rem; padding: 0.5rem 0.65rem; border-left: 2px solid rgba(138,96,48,0.35); } .bp-prompt-lbl { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em; color: #8a5818; font-weight: 600; display: block; margin-bottom: 0.2rem; } .bp-cp-prompt p { font-size: 0.88rem; color: #3a1860; line-height: 1.65; margin: 0; font-style: italic; } .bp-cp-cta { background: rgba(138,96,48,0.09); border-left: 3px solid #c8a060; padding: 0.55rem 0.75rem; border-radius: 0 5px 5px 0; margin-top: 0.5rem; } .bp-cta-lbl { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.12em; color: #7a5020; font-weight: 600; display: block; margin-bottom: 0.2rem; } .bp-cta-txt { font-size: 0.9rem; color: #1a0830; line-height: 1.6; margin: 0; } .bp-cp-folio { position: absolute; bottom: 0.3rem; right: 0.5rem; font-size: 0.6rem; color: rgba(138,96,48,0.35); font-variant-numeric: tabular-nums; } /* ── Spreads ── */ .bp-spread-sub { font-size: 0.76rem; color: #7a5020; font-style: italic; margin-bottom: 0.28rem; margin-top: -0.28rem; } .bp-spread-desc { font-size: 0.9rem; color: #1a0830; line-height: 1.68; margin-bottom: 0.55rem; } .bp-spread-pos { display: flex; flex-direction: column; gap: 0.32rem; } .bp-sp-row { display: flex; gap: 0.55rem; font-size: 0.86rem; line-height: 1.5; } .bp-sp-n { color: #7a5020; font-weight: 600; min-width: 1rem; } .bp-sp-txt { color: #1a0830; } /* ── Closing ── */ .bp-closing-page { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.55rem; } .bp-closing-logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(138,96,48,0.28); } .bp-closing-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: #1a0830; margin: 0; line-height: 1.3; } .bp-closing-body { font-size: 0.74rem; color: #2a1040; line-height: 1.62; margin: 0; } .bp-closing-url { font-size: 0.66rem; color: #8a5f18; margin: 0; } /* ── Back cover ── */ .bp-content.bp-is-back-cover { background: linear-gradient(160deg, #1a0830 0%, #0d0420 50%, #1a0830 100%); color: #f0d898; align-items: center; justify-content: center; text-align: center; gap: 0.9rem; } .bp-bc-quote { font-style: italic; font-size: 0.78rem; color: rgba(240,216,152,0.65); line-height: 1.65; max-width: 84%; margin: 0 auto; } .bp-bc-logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,168,76,0.28); } .bp-bc-url { font-size: 0.66rem; color: rgba(240,216,152,0.38); letter-spacing: 0.09em; } /* ── Blank page ── */ .bp-blank-page .bp-content, .bp-blank { width: 100%; height: 100%; } /* ── Light mode stays paper — no overrides needed ── */ /* ── Responsive: tablet / mobile ── */ @media (max-width: 679px) { .bv-book-title { display: none; } .bv-page-num { min-width: 60px; font-size: 0.68rem; } .bv-close-btn { font-size: 0.72rem; padding: 4px 9px; } .bv-nav-btn { font-size: 0.76rem; padding: 6px 14px; } .bp-content { padding: 1.2rem 1.1rem; } .bp-cover-title { font-size: 1.15rem; } .bp-cp-title { font-size: 1.05rem; } .bp-cp-truth { font-size: 0.84rem; } .bp-body-text p { font-size: 0.88rem; } .bp-cta-txt { font-size: 0.8rem; } } /* ── Dragon Oracle Agent ─────────────────────────────────────────────────────── */ #oracle-agent-fab { display: none; /* hidden by default; shown for creator via JS */ align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.35); cursor: pointer; transition: background 0.18s, border-color 0.18s; flex-shrink: 0; } #oracle-agent-fab:hover { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.6); } #oaf-icon { font-size: 15px; line-height: 1; } #oaf-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #c9a84c; } #oracle-agent-panel { position: fixed; right: -420px; bottom: 0; top: 0; width: 400px; background: var(--bg, #0a0008); border-left: 1px solid rgba(201,168,76,0.15); display: flex; flex-direction: column; z-index: 450; transition: right 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: -8px 0 32px rgba(0,0,0,0.5); } #oracle-agent-panel.open { right: 0; } #oap-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(201,168,76,0.12); flex-shrink: 0; } #oap-title { font-size: 15px; font-style: italic; color: #c9a84c; font-family: Georgia, serif; } #oap-close { font-size: 20px; color: rgba(240,232,213,0.3); padding: 2px 6px; border-radius: 4px; line-height: 1; cursor: pointer; background: none; border: none; transition: color 0.15s; } #oap-close:hover { color: #f0e8d5; } #oap-controls { padding: 12px 16px; flex-shrink: 0; } #oap-mode { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.15); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: rgba(240,232,213,0.7); outline: none; cursor: pointer; } #oap-input { flex-shrink: 0; margin: 0 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,76,0.15); border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.6; color: #f0e8d5; resize: none; outline: none; height: 80px; font-family: inherit; transition: border-color 0.2s; } #oap-input:focus { border-color: rgba(201,168,76,0.4); } #oap-input::placeholder { color: rgba(240,232,213,0.2); font-style: italic; } #oap-send { flex-shrink: 0; margin: 10px 16px 0; background: #c9a84c; color: #0a0008; font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 20px; letter-spacing: 0.03em; border: none; cursor: pointer; transition: opacity 0.18s; } #oap-send:hover:not(:disabled) { opacity: 0.85; } #oap-send:disabled { opacity: 0.45; cursor: not-allowed; } #oap-output { flex: 1; overflow-y: auto; margin: 12px 16px 0; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,76,0.12); border-radius: 8px; font-size: 13px; line-height: 1.8; color: rgba(240,232,213,0.8); font-family: Georgia, serif; min-height: 80px; } #oap-output::-webkit-scrollbar { width: 3px; } #oap-output::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.15); border-radius: 2px; } .oa-cursor { display: inline-block; color: #c9a84c; animation: blink 0.8s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .oa-error { color: #e06060; font-family: system-ui; font-size: 12px; font-style: italic; } #oap-footer { display: flex; justify-content: flex-end; padding: 10px 16px 20px; flex-shrink: 0; } #oap-clear-key { font-size: 10px; color: rgba(240,232,213,0.2); padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; background: none; cursor: pointer; transition: color 0.15s, border-color 0.15s; } #oap-clear-key:hover { color: rgba(240,232,213,0.5); border-color: rgba(201,168,76,0.15); } /* ── Oracle Agent: prompt chips ──────────────────────────────────────────────── */ #oap-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 8px; flex-shrink: 0; } .oap-chip { font-size: 11px; line-height: 1.4; color: rgba(201,168,76,0.75); background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.18); border-radius: 12px; padding: 4px 10px; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s, color 0.15s; } .oap-chip:hover { background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.4); color: #c9a84c; } .oap-chip.selected { background: rgba(201,168,76,0.16); border-color: #c9a84c; color: #c9a84c; } /* ── Oracle Agent: light mode ────────────────────────────────────────────────── */ [data-theme="light"] #oracle-agent-panel { background: #f5ede0; border-left-color: rgba(138,95,24,0.2); box-shadow: -8px 0 32px rgba(0,0,0,0.15); } [data-theme="light"] #oap-header { border-bottom-color: rgba(138,95,24,0.15); } [data-theme="light"] #oap-title { color: #8a5f18; } [data-theme="light"] #oap-close { color: rgba(26,8,48,0.3); } [data-theme="light"] #oap-close:hover { color: #1a0830; } [data-theme="light"] #oap-mode { background: #ede0cc; border-color: rgba(138,95,24,0.2); color: rgba(26,8,48,0.75); } [data-theme="light"] .oap-chip { color: rgba(138,95,24,0.8); background: rgba(138,95,24,0.06); border-color: rgba(138,95,24,0.2); } [data-theme="light"] .oap-chip:hover { background: rgba(138,95,24,0.12); border-color: #8a5f18; color: #8a5f18; } [data-theme="light"] .oap-chip.selected { background: rgba(138,95,24,0.15); border-color: #8a5f18; color: #8a5f18; } [data-theme="light"] #oap-input { background: #ede0cc; border-color: rgba(138,95,24,0.2); color: #1a0830; } [data-theme="light"] #oap-input:focus { border-color: #8a5f18; } [data-theme="light"] #oap-input::placeholder { color: rgba(26,8,48,0.3); } [data-theme="light"] #oap-send { background: #8a5f18; color: #f5ede0; } [data-theme="light"] #oap-output { background: #ede0cc; border-color: rgba(138,95,24,0.15); color: rgba(26,8,48,0.8); } [data-theme="light"] #oap-footer button { color: rgba(26,8,48,0.3); } [data-theme="light"] #oap-footer button:hover { color: rgba(26,8,48,0.6); border-color: rgba(138,95,24,0.2); } [data-theme="light"] #oracle-agent-fab { background: rgba(138,95,24,0.1); border-color: rgba(138,95,24,0.35); } [data-theme="light"] #oracle-agent-fab:hover { background: rgba(138,95,24,0.18); } [data-theme="light"] #oaf-label { color: #8a5f18; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE — iPhone / small screen (≤767px) ═══════════════════════════════════════════════════════════════════════════ */ /* Bottom nav hidden on desktop */ .mobile-bottom-nav { display: none; } @media (max-width: 767px) { /* ── Top nav: switch to flex so hidden gn-links doesn't break the grid ── */ .gn-links { display: none; } .global-nav { display: flex; justify-content: space-between; align-items: center; } .gn-brand { flex: 0 0 auto; } .gn-right { flex: 0 0 auto; } /* ── All screens: pad bottom so content clears bottom nav ── */ .screen { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* ── Reading complete bar: lift above bottom nav when shown ── */ .reading-complete-bar { bottom: calc(-80px - 60px - env(safe-area-inset-bottom, 0px)); } .reading-complete-bar.visible { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* ── Dragon guide: lift above bottom nav ── */ .dragon-guide { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px); } /* ── Oracle agent: full width slide-in on phone ── */ #oracle-agent-panel { width: 100vw; right: -100vw; top: 56px; } #oracle-agent-panel.open { right: 0; } /* ── Bottom Navigation Bar ── */ .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(10, 0, 8, 0.97); border-top: 1px solid rgba(201, 168, 76, 0.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); align-items: stretch; } .mbn-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--grey, #888); min-height: 44px; background: transparent; border: none; cursor: pointer; transition: color 0.2s; -webkit-tap-highlight-color: transparent; } .mbn-link.active { color: var(--gold, #c9a84c); } .mbn-link:active { opacity: 0.6; } .mbn-icon { font-size: 1.1rem; line-height: 1; display: block; } .mbn-label { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-sans, Inter, sans-serif); display: block; } } /* ── Light mode bottom nav ── */ [data-theme="light"] .mobile-bottom-nav { background: rgba(245, 237, 224, 0.97); border-top-color: rgba(138, 95, 24, 0.15); } [data-theme="light"] .mbn-link { color: rgba(26, 8, 48, 0.35); } [data-theme="light"] .mbn-link.active { color: #8a5f18; } /* ═══════════════════════════════════════════════════════════════════════════ TABLET / iPAD (768px – 1024px) ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1024px) { .home-inner { max-width: 600px; } .cards-stage { max-width: 700px; margin-inline: auto; } .card-page-body { max-width: 760px; margin-inline: auto; } .insights-body { max-width: 700px; margin-inline: auto; } } /* ═══════════════════════════════════════════════════════════════════════════ PANEL READING BLOCK & SPEAK BUTTON ═══════════════════════════════════════════════════════════════════════════ */ .panel-reading-block { margin: 1.1rem 0; padding: 1rem 1rem 0.8rem; background: rgba(201,168,76,0.04); border-left: 2px solid rgba(201,168,76,0.3); border-radius: 0 8px 8px 0; } .panel-reading-mode-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; color: rgba(201,168,76,0.7); } .panel-reading-mode-badge.mode-shadow { color: rgba(160,120,210,0.8); } .panel-reading-text { font-size: 0.92rem; line-height: 1.65; color: rgba(240,232,213,0.88); margin: 0 0 0.8rem; font-style: italic; } [data-theme="light"] .panel-reading-text { color: rgba(26,8,48,0.8); } .panel-speak-btn { background: none; border: 1px solid rgba(201,168,76,0.25); color: rgba(201,168,76,0.7); font-size: 0.78rem; padding: 0.35rem 0.85rem; border-radius: 20px; cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em; } .panel-speak-btn:hover { border-color: rgba(201,168,76,0.6); color: #c9a84c; } .panel-speak-btn.speaking { color: #e07070; border-color: rgba(224,112,112,0.4); } /* ═══════════════════════════════════════════════════════════════════════════ ORACLE CHAT ═══════════════════════════════════════════════════════════════════════════ */ .oracle-chat-overlay { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,2,18,0.7); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .oracle-chat-overlay.open { opacity: 1; pointer-events: all; } .oracle-chat-panel { width: 100%; max-width: 600px; height: 82vh; background: linear-gradient(180deg, rgba(18,6,35,0.99), rgba(8,2,18,0.99)); border: 1px solid rgba(201,168,76,0.2); border-bottom: none; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 -20px 60px rgba(0,0,0,0.6); } .oracle-chat-overlay.open .oracle-chat-panel { transform: translateY(0); } .oc-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid rgba(201,168,76,0.1); flex-shrink: 0; } .oc-header-left { display: flex; flex-direction: column; } .oc-title { font-family: var(--font-serif); font-size: 1.1rem; color: #f0e8d5; font-weight: 700; } .oc-subtitle { font-size: 0.72rem; color: var(--grey); letter-spacing: 0.04em; margin-top: 0.1rem; } .oc-header-right { display: flex; align-items: center; gap: 0.75rem; } .oc-voice-toggle { display: flex; gap: 0.3rem; } .oc-voice-btn { background: none; border: 1px solid rgba(201,168,76,0.2); color: var(--grey); font-size: 0.72rem; padding: 0.28rem 0.65rem; border-radius: 20px; cursor: pointer; transition: all 0.2s; } .oc-voice-btn.active { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.5); color: #c9a84c; } .oc-close { background: none; border: none; color: var(--grey); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; transition: color 0.2s; } .oc-close:hover { color: #f0e8d5; } .oc-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; } .oc-messages::-webkit-scrollbar { width: 3px; } .oc-messages::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.1); } .oc-welcome { text-align: center; padding: 1.5rem 1rem; } .oc-welcome-text { font-size: 0.85rem; color: var(--grey); font-style: italic; line-height: 1.6; } .oc-msg { display: flex; align-items: flex-start; gap: 0.6rem; } .oc-msg-user { flex-direction: row-reverse; } .oc-avatar { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.15rem; } .oc-bubble { max-width: 85%; padding: 0.75rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.65; } .oc-msg-oracle .oc-bubble { background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.15); color: rgba(240,232,213,0.9); border-radius: 4px 14px 14px 14px; font-style: italic; } .oc-msg-user .oc-bubble { background: rgba(100,60,160,0.2); border: 1px solid rgba(100,60,160,0.3); color: rgba(240,232,213,0.85); border-radius: 14px 4px 14px 14px; } .oc-msg.streaming .oc-bubble { min-height: 2.4rem; } .oc-cursor { display: inline-block; animation: blink 1s infinite; color: rgba(201,168,76,0.7); margin-left: 2px; } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } } .oc-input-row { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem 1rem 1rem; border-top: 1px solid rgba(201,168,76,0.1); flex-shrink: 0; } .oc-mic-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.2); border-radius: 50%; width: 42px; height: 42px; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .oc-mic-btn:hover { background: rgba(201,168,76,0.1); } .oc-mic-btn.listening { background: rgba(224,80,80,0.15); border-color: rgba(224,80,80,0.5); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} } .oc-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.2); border-radius: 12px; padding: 0.65rem 0.85rem; color: #f0e8d5; font-size: 0.9rem; line-height: 1.5; resize: none; outline: none; overflow: hidden; min-height: 42px; max-height: 120px; font-family: var(--font-sans); } .oc-input:focus { border-color: rgba(201,168,76,0.4); } .oc-input::placeholder { color: rgba(240,232,213,0.2); } .oc-send-btn { background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); color: #c9a84c; font-size: 1.1rem; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .oc-send-btn:hover { background: rgba(201,168,76,0.22); } .oc-send-btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn-talk-oracle { background: linear-gradient(135deg, rgba(100,60,180,0.15), rgba(60,20,100,0.1)); border-color: rgba(100,60,180,0.4) !important; color: rgba(180,140,255,0.9) !important; } /* Light mode overrides */ [data-theme="light"] .oracle-chat-panel { background: linear-gradient(180deg, #f5ede0, #ece0cc); border-color: rgba(138,95,24,0.2); } [data-theme="light"] .oc-msg-oracle .oc-bubble { background: rgba(138,95,24,0.06); border-color: rgba(138,95,24,0.15); color: #1a0830; } [data-theme="light"] .oc-msg-user .oc-bubble { background: rgba(80,40,140,0.1); border-color: rgba(80,40,140,0.2); color: #1a0830; } [data-theme="light"] .oc-input { background: rgba(255,255,255,0.6); border-color: rgba(138,95,24,0.2); color: #1a0830; } [data-theme="light"] .oc-input::placeholder { color: rgba(26,8,48,0.3); } /* ═══════════════════════════════════════════════════════════════════════════ MONETISATION ═══════════════════════════════════════════════════════════════════════════ */ /* ── Upgrade Overlay ───────────────────────────────────────────────────────── */ .upgrade-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 2, 18, 0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .upgrade-overlay.open { opacity: 1; pointer-events: all; } .upgrade-card { background: linear-gradient(160deg, rgba(30, 10, 55, 0.98), rgba(15, 4, 30, 0.98)); border: 1.5px solid rgba(201, 168, 76, 0.5); border-radius: 20px; padding: 2rem 1.6rem 1.6rem; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 0 60px rgba(201, 168, 76, 0.18), 0 20px 60px rgba(0,0,0,0.7); } .upgrade-symbol { font-size: 2.4rem; margin-bottom: 0.5rem; } .upgrade-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: #f0e8d5; margin: 0 0 0.6rem; } .upgrade-sub { font-size: 0.88rem; color: var(--grey); line-height: 1.55; margin-bottom: 1.2rem; } .upgrade-features { text-align: left; margin-bottom: 1.4rem; } .upgrade-feature { font-size: 0.84rem; color: rgba(201, 168, 76, 0.85); padding: 0.3rem 0; border-bottom: 1px solid rgba(201, 168, 76, 0.08); } .upgrade-price-row { margin-bottom: 1.2rem; } .upgrade-amount { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: #c9a84c; } .upgrade-period { display: block; font-size: 0.78rem; color: var(--grey); margin-top: 0.1rem; } .upgrade-btn { display: block; width: 100%; background: linear-gradient(135deg, #c9a84c, #a07030); color: #0a0008; font-weight: 700; font-size: 1rem; padding: 0.85rem; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; transition: opacity 0.2s; margin-bottom: 1.2rem; } .upgrade-btn:hover { opacity: 0.88; } .upgrade-divider { font-size: 0.72rem; color: var(--grey); margin-bottom: 0.8rem; letter-spacing: 0.05em; } .upgrade-code-row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; } .upgrade-code-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 0.55rem 0.75rem; color: #f0e8d5; font-size: 0.88rem; outline: none; } .upgrade-code-input:focus { border-color: rgba(201,168,76,0.5); } .upgrade-code-btn { background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); color: #c9a84c; font-size: 0.85rem; padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .upgrade-code-btn:hover { background: rgba(201,168,76,0.2); } .upgrade-code-error { font-size: 0.78rem; color: #e07070; min-height: 1rem; margin-bottom: 0.6rem; } .upgrade-skip { background: none; border: none; color: var(--grey); font-size: 0.76rem; cursor: pointer; padding: 0.3rem; text-decoration: underline; opacity: 0.6; transition: opacity 0.2s; } .upgrade-skip:hover { opacity: 1; } [data-theme="light"] .upgrade-card { background: linear-gradient(160deg, #f5ede0, #ece0cc); border-color: rgba(138, 95, 24, 0.4); } [data-theme="light"] .upgrade-title { color: #1a0830; } [data-theme="light"] .upgrade-feature { color: #8a5f18; } [data-theme="light"] .upgrade-code-input { background: rgba(255,255,255,0.6); border-color: rgba(138,95,24,0.25); color: #1a0830; } /* ── AI Reading Teaser ─────────────────────────────────────────────────────── */ .panel-ai-teaser { padding: 1rem; background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.15); border-radius: 10px; text-align: center; } .ai-teaser-text { font-family: var(--font-serif); font-size: 0.95rem; font-style: italic; color: rgba(201,168,76,0.9); margin: 0 0 0.3rem; } .ai-teaser-sub { font-size: 0.8rem; color: var(--grey); line-height: 1.5; margin-bottom: 0.9rem; } .ai-teaser-btn { background: linear-gradient(135deg, #c9a84c, #a07030); color: #0a0008; font-weight: 700; font-size: 0.88rem; padding: 0.6rem 1.4rem; border-radius: 8px; border: none; cursor: pointer; transition: opacity 0.2s; } .ai-teaser-btn:hover { opacity: 0.85; } /* ── Pre-order Button ──────────────────────────────────────────────────────── */ .btn-preorder { display: block; width: 100%; background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.06)); border: 1.5px solid rgba(201,168,76,0.4); color: #c9a84c; font-size: 0.88rem; font-weight: 600; padding: 0.75rem 1rem; border-radius: 10px; cursor: pointer; text-align: center; text-decoration: none; margin-top: 0.5rem; transition: background 0.2s, border-color 0.2s; letter-spacing: 0.02em; } .btn-preorder:hover { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.7); }