/* Lila · luminous pathways. Every illustration is SVG/CSS, shared by both plans. */
.lila-root { --lila-gold:#e9c887; --lila-soft:rgba(233,200,135,.12); line-height:1.55; }
.lila-root h1,.lila-root h2,.lila-root h3,.lila-root p { margin-top:0; }
.lila-root h1,.lila-root h2 { font-family:var(--serif); font-weight:400; }
.lila-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.lila-topline>span { font-size:10px; letter-spacing:.14em; color:var(--muted); }
.lila-button { border:1px solid var(--line); border-radius:16px; background:var(--glass-strong); color:var(--ink); padding:13px 16px; font:600 14px/1.4 system-ui,sans-serif; min-height:46px; cursor:pointer; transition:transform .18s,background .18s; }
.lila-button:hover { background:var(--brand-soft); }
.lila-button:active { transform:translateY(1px); }
.lila-button:disabled { opacity:.5; cursor:wait; }
.lila-button:focus-visible,.lila-root textarea:focus-visible,.lila-space:focus-visible rect { outline:2px solid var(--brand); outline-offset:3px; }
.lila-primary { background:linear-gradient(115deg,#d5baef,#a98be0); color:#251638; border-color:transparent; box-shadow:0 6px 24px rgba(169,139,240,.18); }
.lila-primary:hover { background:linear-gradient(115deg,#e1cbf5,#baa0eb); }
.lila-wide { width:100%; }
.lila-back,.lila-inline,.lila-text-button { border:0; background:none; padding:4px 0; min-height:32px; font-size:13px; color:var(--ink-2); box-shadow:none; }
.lila-back:hover,.lila-inline:hover { background:none; color:var(--brand); }
.lila-eyebrow { font:600 10px/1.5 system-ui,sans-serif; letter-spacing:.16em; color:var(--lila-gold); margin-bottom:10px; }
.lila-intro { text-align:center; }
.lila-intro>h1 { font-size:clamp(30px,8vw,42px); line-height:1.13; letter-spacing:-.035em; max-width:360px; margin:0 auto 15px; }
.lila-intro-copy { font-size:14px; color:var(--ink-2); max-width:340px; margin:0 auto 22px; }
.lila-orbit { width:62px; height:62px; position:relative; display:grid; place-items:center; border:1px solid rgba(233,200,135,.5); border-radius:50%; margin:4px auto 18px; box-shadow:0 0 45px rgba(169,139,240,.16); }
.lila-orbit:before { content:""; position:absolute; inset:9px -8px; border:1px solid rgba(233,200,135,.3); border-radius:50%; transform:rotate(-35deg); }
.lila-orbit>span { font-size:32px; color:var(--lila-gold); }
.lila-board { overflow:hidden; border:1px solid rgba(233,200,135,.25); background:radial-gradient(ellipse at 15% 85%,rgba(77,161,151,.17),transparent 50%),radial-gradient(ellipse at 90% 10%,rgba(160,111,216,.18),transparent 60%),linear-gradient(145deg,#201830,#131020); border-radius:24px; padding:16px 12px 10px; position:relative; margin:18px 0; box-shadow:0 12px 36px rgba(0,0,0,.18); color:#f5eefc; text-align:left; }
.lila-board-heading { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.16em; color:#d8c1e9; padding:0 6px; }
.lila-map { width:100%; height:auto; display:block; margin:9px auto 0; overflow:visible; }
.lila-route { fill:none; stroke:#bba4c8; stroke-width:1; opacity:.22; }
.lila-jump { fill:none; stroke-width:1.5; stroke:#dca78d; opacity:.28; stroke-dasharray:3 5; }
.lila-jump.up { stroke:#83c6bb; opacity:.38; stroke-dasharray:none; }
.lila-travelled { fill:none; stroke:#f4d490; stroke-width:2; stroke-linejoin:round; opacity:.65; }
.lila-space { cursor:pointer; }
.lila-space rect { fill:var(--space-fill); stroke:var(--space-stroke); stroke-width:.8; }
.lila-space:hover rect,.lila-space:focus-visible rect { stroke:#fff0d0; stroke-width:1.8; }
.lila-color-coral { --space-fill:#513540; --space-stroke:#8b5961; --cell-accent:#e6a599; }
.lila-color-amber { --space-fill:#4c3e33; --space-stroke:#8b7653; --cell-accent:#e5c382; }
.lila-color-teal { --space-fill:#294643; --space-stroke:#467a71; --cell-accent:#8dccc1; }
.lila-color-blue { --space-fill:#2e3c56; --space-stroke:#506e92; --cell-accent:#a2bce6; }
.lila-color-violet { --space-fill:#443457; --space-stroke:#7d5c99; --cell-accent:#c3a3e8; }
.lila-color-rose { --space-fill:#4b334d; --space-stroke:#925e88; --cell-accent:#ddb1d2; }
.lila-number { fill:#d3c7e1; font:12px system-ui,sans-serif; text-anchor:middle; pointer-events:none; }
.lila-space.visited rect { stroke:#bca26c; stroke-width:1.4; }
.lila-space.current rect { fill:#f0d8a1; stroke:#fff2d2; stroke-width:1.8; filter:drop-shadow(0 0 6px #e8c78066); }
.lila-space.current .lila-number { fill:#392841; font-weight:800; }
.lila-token { fill:#fff8e8; stroke:#c59b54; stroke-width:1.5; }
.lila-token-halo { fill:none; stroke:#e7cc8f; stroke-width:1; opacity:.5; }
.lila-map-caption { min-height:28px; font-size:10px; line-height:1.5; color:#b6a7ca; margin:6px 6px 0; text-align:center; }
.lila-board.compact { max-width:360px; margin:18px auto 26px; transform:perspective(900px) rotateX(7deg); }
.lila-board.compact .lila-map { max-height:230px; }
.lila-board.compact .lila-board-heading { font-size:8px; }
.lila-start { text-align:left; background:var(--glass); border:1px solid var(--line); padding:22px 20px; border-radius:24px; }
.lila-start h2 { font-size:25px; line-height:1.2; margin-bottom:16px; }
.lila-themes { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.lila-chip { border-radius:999px; padding:8px 12px; min-height:38px; font-size:12px; font-weight:500; }
.lila-chip.selected { border-color:var(--brand); background:var(--brand-soft); color:var(--ink); }
.lila-root label { display:block; font-size:13px; color:var(--ink-2); margin-bottom:8px; }
.lila-root textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:16px; background:var(--bg-1); color:var(--ink); padding:13px 14px; font:15px/1.55 system-ui,sans-serif; min-height:84px; }
.lila-root textarea::placeholder { color:var(--muted); }
.lila-hint,.lila-muted { color:var(--muted); font-size:12px; line-height:1.6; }
.lila-hint { margin:8px 0 14px; }
.lila-start .lila-text-button { margin:10px auto 0; display:block; }
.lila-rules { margin:23px 4px 0; text-align:left; color:var(--ink-2); font-size:13px; }
.lila-rules summary { cursor:pointer; padding:8px 0; }
.lila-rules>div { padding:10px 0; }
.lila-rules p { margin-bottom:12px; }
.lila-game-heading { display:flex; align-items:flex-start; gap:10px; }
.lila-game-heading h1 { font-size:30px; line-height:1.15; letter-spacing:-.02em; white-space:pre-line; margin:0; }
.lila-mode { margin-left:auto; flex-shrink:0; font-size:9px; padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); }
.lila-intention { margin:18px 0; font-size:14px; color:var(--ink-2); padding:0 0 0 13px; border-left:2px solid var(--brand); overflow-wrap:anywhere; }
.lila-progress { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; margin-top:18px; }
.lila-progress .lila-inline { margin-left:auto; font-size:12px; }
.lila-playing .lila-board { margin-top:8px; }
.lila-cell-card { padding:24px 22px 20px; border:1px solid var(--line); border-radius:24px; background:var(--surface); position:relative; overflow:hidden; scroll-margin-top:18px; }
.lila-cell-card:before { content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--cell-accent); }
.lila-cell-meta { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.13em; color:var(--cell-accent); margin-bottom:14px; }
.lila-cell-card h2 { font-size:33px; line-height:1.1; letter-spacing:-.02em; margin-bottom:16px; }
.lila-cell-copy { font-size:15px; line-height:1.7; color:var(--ink-2); margin-bottom:18px; }
.lila-reflection { font-family:var(--serif); font-size:21px; line-height:1.5; margin-bottom:0; padding-top:16px; border-top:1px solid var(--line); }
.lila-transition { font-size:12px; color:var(--ink-2); background:var(--brand-soft); border-radius:12px; padding:10px 12px; }
.lila-note { margin:20px 0 16px; }
.lila-note-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.lila-note-actions>.lila-button { flex:1; min-width:130px; font-size:12px; }
.lila-guide { color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }
.lila-main-actions { display:grid; grid-template-columns:1.35fr 1fr; gap:9px; }
.lila-roll { font-size:16px; padding:16px 12px; }
.lila-save-hint { font-size:11px; color:var(--muted); text-align:center; margin:11px 0 18px; }
.lila-chapter { border:1px solid rgba(233,200,135,.25); background:var(--lila-soft); padding:14px 16px; border-radius:18px; margin-bottom:16px; }
.lila-chapter strong { font-size:14px; }
.lila-chapter p { font-size:13px; color:var(--ink-2); margin:5px 0 0; }
.lila-oracle-answer { background:var(--brand-soft); border:1px solid var(--line); padding:16px; border-radius:22px; margin-top:14px; }
.lila-oracle-label { display:flex; align-items:center; gap:10px; font-size:13px; margin-bottom:10px; }
.lila-oracle-label img { border-radius:50%; }
.lila-oracle-answer>p { margin:0; font-size:15px; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
.lila-don-invite { font-size:12px; line-height:1.7; color:var(--muted); padding:14px 0; }
.lila-don-invite a { display:block; margin-top:6px; font-weight:600; text-decoration:none; }
.lila-journal { border:1px solid var(--line); background:var(--glass); border-radius:22px; padding:20px; margin:16px 0; }
.lila-journal h2 { font-size:25px; margin-bottom:14px; }
.lila-entry { border-left:1px solid var(--line); padding:0 0 18px 15px; position:relative; }
.lila-entry:before { content:""; position:absolute; left:-3px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--brand); }
.lila-entry:last-child { padding-bottom:0; }
.lila-entry-meta { font-size:10px; color:var(--muted); letter-spacing:.04em; }
.lila-entry h3 { font:600 14px/1.5 system-ui,sans-serif; margin:5px 0; }
.lila-entry p { font-size:13px; white-space:pre-line; margin:5px 0; color:var(--ink-2); overflow-wrap:anywhere; }
.lila-entry.oracle:before { background:var(--lila-gold); }
.lila-finished { text-align:center; }
.lila-complete-symbol { font:76px/1 var(--serif); color:var(--lila-gold); margin:28px 0; }
.lila-finished h1 { font-size:36px; line-height:1.1; margin-bottom:16px; }
.lila-summary { text-align:left; white-space:pre-line; font-size:15px; line-height:1.75; background:var(--glass); border:1px solid var(--line); border-radius:24px; padding:22px; margin:20px 0; overflow-wrap:anywhere; }
.lila-finished>.lila-button { margin-bottom:10px; }
.lila-finished .lila-journal { text-align:left; }
.lila-archive { margin:28px 0 12px; }
.lila-archive>h2 { font-size:25px; margin-bottom:14px; }
.lila-archive-item { border-bottom:1px solid var(--line); padding:14px 0; }
.lila-archive-item>summary { cursor:pointer; font-size:14px; color:var(--ink-2); }
.lila-archive-item>summary span { overflow-wrap:anywhere; }
.lila-archive-item small { display:block; margin:6px 0 0 18px; font-size:11px; color:var(--muted); }
.lila-archive-item>p { font-size:13px; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; margin:16px 0 0; color:var(--ink-2); }
.lila-error { padding:14px 16px; border:1px solid rgba(230,165,153,.4); background:rgba(230,165,153,.08); border-radius:16px; margin-bottom:16px; font-size:13px; }
.lila-error p { margin:0 0 6px; }
.lila-loading { min-height:350px; display:grid; place-items:center; color:var(--muted); }
.lila-arrive { animation:lila-arrive .45s ease-out; }
@keyframes lila-arrive { from { opacity:.45; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.lila-teaser { width:100%; margin:16px 0; text-align:left; padding:20px; border:1px solid rgba(233,200,135,.28); border-radius:24px; background:radial-gradient(ellipse at 100% 50%,rgba(169,139,240,.2),transparent 65%),var(--surface); display:grid; grid-template-columns:1fr 60px; align-items:center; gap:10px; color:var(--ink); }
.lila-teaser small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:8px; }
.lila-teaser strong { display:block; font:400 25px/1.1 var(--serif); margin-bottom:8px; }
.lila-teaser p { margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.lila-teaser .lila-teaser-go { font-size:12px; font-weight:600; color:var(--brand); }
.lila-teaser .lila-teaser-symbol { font-size:45px; line-height:1; color:var(--now); border:1px solid var(--line); border-radius:20px; width:60px; height:70px; display:grid; place-items:center; transform:rotate(8deg); }
:root[data-theme="light"] .lila-root { --lila-gold:#8f6834; --lila-soft:rgba(183,132,63,.08); }
:root[data-theme="light"] .lila-cell-meta { color:var(--brand); }
@media (prefers-color-scheme:light) { :root:not([data-theme="dark"]) .lila-root { --lila-gold:#8f6834; --lila-soft:rgba(183,132,63,.08); } :root:not([data-theme="dark"]) .lila-cell-meta { color:var(--brand); } }
@media(max-width:360px) { .lila-game-heading h1 { font-size:26px; } .lila-mode { font-size:8px; padding:5px 7px; } .lila-cell-card { padding:20px 17px; } .lila-main-actions { grid-template-columns:1fr; } .lila-start { padding:20px 16px; } .lila-progress { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .lila-arrive { animation:none; } .lila-button { transition:none; } }