:root {
    --bg: #0e0e12;
    --surface: #18181f;
    --surface2: #222230;
    --gold: #c9a96e;
    --gold-dim: rgba(201,169,110,0.2);
    --text: #f0ead8;
    --text-dim: #9e9480;
    --text-faint: #55504a;
    --border: rgba(201,169,110,0.12);
    --border-hover: rgba(201,169,110,0.4);
    --radius: 16px;
    --radius-lg: 22px;
}

/* ════════════════════
   OPENING QUOTE SCREEN
════════════════════ */
#screen-quote {
    justify-content:center;
    align-items:center;
    background:var(--bg);
    cursor:pointer;
    padding:0;
}

.quote-scene {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    min-height:100vh;
    padding:40px 40px 60px;
    gap:32px;
    text-align:center;
}

/* AA stacked logo */
.quote-logo {
    margin-bottom:8px;
    animation:fadeUp .8s ease both;
}
.aa-logo {
    width:72px; height:54px;
    overflow:visible;
}
.aa-letter {
    font-family:'Cinzel', serif;
    font-size:48px;
    fill:var(--gold);
    filter:drop-shadow(0 0 18px rgba(201,169,110,.55));
}
.aa-letter-back {
    fill:rgba(201,169,110,.28);
    filter:none;
}

.quote-text {
    font-size:19px; font-weight:300;
    line-height:2.0;
    color:var(--text);
    max-width:340px;
    opacity:0;
    animation:quoteReveal 1.6s 0.6s ease both;
    letter-spacing:.04em;
}

.quote-attr {
    font-size:12px; color:var(--gold);
    letter-spacing:.18em; opacity:0;
    animation:quoteReveal .8s 1.8s ease both;
}

.quote-tap {
    position:fixed; bottom:36px;
    font-size:11px; color:var(--text-faint);
    letter-spacing:.18em;
    opacity:0;
    animation:quoteReveal .6s 2.6s ease both;
}

@keyframes quoteReveal {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}

@keyframes quoteFadeOut {
    from { opacity:1; }
    to   { opacity:0; pointer-events:none; }
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Noto Serif SC',serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
}

.screen {
    display:none;
    min-height:100vh;
    flex-direction:column;
    align-items:center;
    padding:40px 0 80px;
}
.screen.active { display:flex; }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

.btn-back {
    background:none; border:none;
    color:var(--text-dim);
    font-family:inherit; font-size:14px;
    cursor:pointer; padding:8px 20px;
    align-self:flex-start;
    transition:color .2s;
}
.btn-back:hover { color:var(--text); }

.btn-collection-fab {
    position:fixed; bottom:24px; right:20px;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--gold); font-size:20px;
    cursor:pointer; z-index:100;
    transition:all .25s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.btn-collection-fab:hover {
    border-color:var(--border-hover);
    transform:scale(1.08);
}

.btn-music-fab {
    position:fixed; bottom:80px; right:20px;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text-dim); font-size:18px;
    cursor:pointer; z-index:100;
    transition:all .25s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.btn-music-fab:hover { border-color:var(--border-hover); transform:scale(1.08); }
.btn-music-fab.playing { color:var(--gold); border-color:rgba(201,169,110,.35); }

@keyframes spin-slow {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
.btn-music-fab.playing { animation:spin-slow 8s linear infinite; }

/* ════════════════════
   MEDITATE SCREEN
════════════════════ */
#screen-meditate {
    justify-content:center;
    align-items:center;
    padding:0;
}

.meditate-scene {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    min-height:100vh;
    gap:0;
    padding:60px 48px;
    text-align:center;
    position:relative;
}

/* breathing orb */
.meditate-orb {
    width:120px; height:120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,169,110,.18) 0%, rgba(201,169,110,.04) 60%, transparent 100%);
    border:1px solid rgba(201,169,110,.2);
    margin-bottom:56px;
    animation:orbBreath 8s ease-in-out infinite;
    box-shadow:0 0 40px rgba(201,169,110,.08), inset 0 0 30px rgba(201,169,110,.06);
}

@keyframes orbBreath {
    0%   { transform:scale(1);    box-shadow:0 0 40px rgba(201,169,110,.08), inset 0 0 30px rgba(201,169,110,.06); }
    50%  { transform:scale(1.28); box-shadow:0 0 80px rgba(201,169,110,.22), inset 0 0 50px rgba(201,169,110,.14); }
    100% { transform:scale(1);    box-shadow:0 0 40px rgba(201,169,110,.08), inset 0 0 30px rgba(201,169,110,.06); }
}

/* text lines */
.meditate-lines {
    display:flex; flex-direction:column;
    gap:28px;
    margin-bottom:64px;
    min-height:160px;
}

.meditate-line {
    font-size:16px; font-weight:300;
    color:var(--text); line-height:1.9;
    letter-spacing:.06em;
    opacity:0;
    animation:mediLine .9s ease both;
    animation-delay:var(--d);
}

.meditate-line.question {
    font-size:18px;
    color:var(--gold);
    letter-spacing:.08em;
}

@keyframes mediLine {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}

/* confirm button */
.meditate-btn {
    opacity:0;
    padding:16px 48px;
    background:none;
    border:1px solid rgba(201,169,110,.5);
    border-radius:50px;
    color:var(--gold);
    font-family:inherit; font-size:15px;
    letter-spacing:.12em;
    cursor:pointer;
    transition:all .3s;
    animation:mediLine .8s ease both;
    animation-delay:var(--btn-d, 12s);
    box-shadow:0 0 30px rgba(201,169,110,.08);
}
.meditate-btn:hover {
    background:rgba(201,169,110,.08);
    border-color:var(--gold);
    box-shadow:0 0 40px rgba(201,169,110,.2);
    transform:scale(1.04);
}

/* ════════════════════
   TYPE SELECT — HAND FAN
════════════════════ */
.type-header {
    text-align:center;
    padding:0 20px;
    margin-bottom:32px;
    animation:fadeUp .6s ease both;
}
.site-title {
    font-size:34px; font-weight:300;
    letter-spacing:.18em; color:var(--gold);
    margin-bottom:10px;
}
.site-sub { font-size:13px; color:var(--text-dim); letter-spacing:.08em; }

/* fan container — fixed card-size box, centered horizontally */
.hand-outer {
    width:220px;
    height:340px;
    position:relative;
    margin:0 auto;
    overflow:visible;
    user-select:none;
    touch-action:pan-y;
}

/* ── tarot card — all three stack at (0,0) inside hand-outer ── */
.type-card {
    position:absolute;
    top:0; left:0;
    width:220px; height:340px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid rgba(201,169,110,.18);
    cursor:pointer;
    /* rotation fans around a point below the card */
    transform-origin: center 120%;
    will-change:transform;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.type-card.active {
    box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 44px rgba(201,169,110,.18);
}
.type-card[data-type="word"]   { background:linear-gradient(155deg,#1e0509 0%,#5c111d 55%,#2a080e 100%); }
.type-card[data-type="visual"] { background:linear-gradient(155deg,#050a1e 0%,#11205c 55%,#08102a 100%); }
.type-card[data-type="audio"]  { background:linear-gradient(155deg,#050e08 0%,#11502a 55%,#081a10 100%); }

/* corner ornaments */
.tc-deco {
    position:absolute;
    font-size:14px;
    color:var(--gold);
    opacity:.35;
}
.tc-deco-tl { top:14px; left:16px; }
.tc-deco-br { bottom:14px; right:16px; transform:rotate(180deg); }

.tc-body {
    display:flex; flex-direction:column;
    align-items:center; gap:12px;
    padding:0 24px; text-align:center;
}
.tc-icon {
    font-size:42px; color:var(--gold);
    filter:drop-shadow(0 0 14px rgba(201,169,110,.5));
    margin-bottom:4px;
}
.type-card[data-type="word"]   .tc-icon { color:#e08090; filter:drop-shadow(0 0 14px rgba(224,128,144,.5)); }
.type-card[data-type="visual"] .tc-icon { color:#80a0e0; filter:drop-shadow(0 0 14px rgba(128,160,224,.5)); }
.type-card[data-type="audio"]  .tc-icon { color:#80d0a0; filter:drop-shadow(0 0 14px rgba(128,208,160,.5)); }

.tc-label {
    font-size:22px; font-weight:600;
    color:var(--text); letter-spacing:.06em;
}
.tc-rule {
    width:32px; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.tc-sub { font-size:12px; color:var(--text-dim); line-height:1.6; }

.tc-tap {
    position:absolute; bottom:20px;
    font-size:11px; color:var(--gold);
    opacity:0; letter-spacing:.12em;
    transition:opacity .3s;
}
.type-card.active .tc-tap { opacity:.6; }

/* dots + hint */
.carousel-dots {
    display:flex; gap:8px;
    margin-top:24px;
}
.dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--text-faint);
    transition:all .3s;
}
.dot.active { background:var(--gold); width:18px; border-radius:3px; }

.swipe-hint {
    font-size:11px; color:var(--text-faint);
    letter-spacing:.12em; margin-top:14px;
    animation:fadeUp .8s .4s ease both;
}

/* ════════════════════
   LIST SCREEN
════════════════════ */
#screen-list {
    padding-top:0;
    align-items:flex-start;
}
.list-header {
    width:100%; max-width:480px;
    display:flex; align-items:center; gap:16px;
    padding:0 20px; margin-bottom:20px;
}
.list-header h2 { font-size:20px; font-weight:400; }

.list-filter {
    display:flex; gap:8px; flex-wrap:wrap;
    padding:0 20px; margin-bottom:20px;
    width:100%; max-width:480px;
}
.filter-btn {
    padding:7px 18px; border-radius:50px;
    border:1px solid var(--border);
    background:none; color:var(--text-dim);
    font-family:inherit; font-size:12px;
    letter-spacing:.08em; cursor:pointer;
    transition:all .2s;
}
.filter-btn:hover { border-color:var(--border-hover); color:var(--text); }
.filter-btn.active {
    background:var(--gold-dim);
    border-color:rgba(201,169,110,.5);
    color:var(--gold);
}

.list-items {
    width:100%; max-width:480px;
    display:flex; flex-direction:column;
    padding:0 20px;
}
.list-item {
    display:flex; align-items:center; gap:14px;
    padding:13px 0;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:padding .15s;
}
.list-item:hover { padding-left:6px; }
.list-item-icon {
    font-size:16px; width:28px;
    flex-shrink:0; text-align:center; opacity:.7;
}
.list-item-body { flex:1; min-width:0; }
.list-item-title {
    font-size:14px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:2px;
}
.list-item-sub { font-size:11px; color:var(--text-dim); }
.list-item-tag {
    font-size:10px; color:var(--gold);
    letter-spacing:.1em;
    background:var(--gold-dim);
    padding:3px 9px; border-radius:20px;
    flex-shrink:0;
}

/* list FAB */
.btn-list-fab {
    position:fixed; bottom:136px; right:20px;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text-dim); font-size:16px;
    cursor:pointer; z-index:100;
    transition:all .25s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.btn-list-fab:hover { border-color:var(--border-hover); transform:scale(1.08); color:var(--gold); }


/* ════════════════════
   DRAW / DEAL
════════════════════ */
#screen-draw { padding-top:32px; }

.draw-header {
    width:100%; max-width:420px;
    margin-bottom:20px;
}
.draw-hint {
    font-size:14px; color:var(--text-dim);
    text-align:center; margin-top:4px;
    padding:0 20px;
}

/* deck visual */
.deck-origin {
    display:flex; flex-direction:column;
    align-items:center; gap:8px;
    margin-bottom:28px;
}
.deck-pile {
    position:relative;
    width:64px; height:96px;
}
.deck-card-vis {
    position:absolute;
    width:64px; height:96px;
    border-radius:8px;
    background:linear-gradient(135deg,#1a1a28,#2a2a40);
    border:1px solid rgba(201,169,110,.2);
}
.deck-card-vis:nth-child(1) { transform:rotate(-4deg) translateY(-4px); }
.deck-card-vis:nth-child(2) { transform:rotate(-1deg) translateY(-2px); }
.deck-card-vis:nth-child(3) { transform:rotate(2deg); }

.deck-label {
    font-size:11px; color:var(--text-faint);
    letter-spacing:.12em;
}

.deck-origin.dealt .deck-pile { animation:deckShrink .4s .5s ease both; }
@keyframes deckShrink {
    to { transform:scale(.85); opacity:.4; }
}

/* draw grid */
.draw-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    width:100%; max-width:360px;
    padding:0 20px;
}

.draw-card {
    aspect-ratio:2/3;
    border-radius:var(--radius);
    background:linear-gradient(135deg,#1a1a28,#252538);
    border:1px solid rgba(201,169,110,.14);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    /* deal animation applied via JS */
}
.draw-card::before {
    content:'';
    position:absolute; inset:0;
    background:
        repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(201,169,110,.025) 10px,rgba(201,169,110,.025) 11px),
        repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(201,169,110,.025) 10px,rgba(201,169,110,.025) 11px);
}
.draw-card-symbol {
    font-size:22px; color:rgba(201,169,110,.2); position:relative;
}
.draw-card:hover {
    border-color:rgba(201,169,110,.4);
    box-shadow:0 10px 36px rgba(201,169,110,.15);
}
.draw-card:hover::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(201,169,110,.06),transparent);
}

/* flip animation on select */
.draw-card.flipping {
    animation:cardFlip .4s ease forwards;
}
@keyframes cardFlip {
    0%   { transform:rotateY(0deg) scale(1.05); }
    50%  { transform:rotateY(90deg) scale(1.05); background:#c9a96e; }
    100% { transform:rotateY(0deg) scale(1); opacity:0; }
}

/* deal animation */
@keyframes dealOut {
    0%   { transform:translate(var(--dx),var(--dy)) scale(.35) rotate(-12deg); opacity:0; }
    60%  { opacity:1; }
    100% { transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
}

/* ════════════════════
   REVEAL
════════════════════ */
#screen-reveal { padding-top:28px; }

.reveal-container {
    width:100%; max-width:420px;
    display:flex; flex-direction:column;
    padding:0 20px;
    animation:fadeUp .5s ease both;
}

.artwork-card {
    border-radius:var(--radius-lg);
    background:var(--surface);
    border:1px solid var(--border);
    overflow:hidden;
    margin-bottom:20px;
}

/* word */
.artwork-word { padding:36px 28px 28px; }
.artwork-tag {
    font-size:11px; color:var(--gold);
    letter-spacing:.15em; margin-bottom:24px; opacity:.7;
}
.artwork-quote {
    font-size:17px; line-height:1.95;
    color:var(--text); font-weight:300;
    border-left:2px solid var(--gold-dim);
    padding-left:16px; margin-bottom:28px;
}
.artwork-meta { display:flex; flex-direction:column; gap:4px; margin-bottom:20px; }
.artwork-title-text { font-size:14px; font-weight:600; color:var(--text); }
.artwork-creator { font-size:12px; color:var(--text-dim); }
.artwork-year { font-size:11px; color:var(--text-faint); }
.artwork-intro {
    font-size:13px; color:var(--text-dim);
    line-height:1.85;
    padding-top:18px;
    border-top:1px solid var(--border);
}

/* visual */
.artwork-image-wrap { width:100%; max-height:300px; overflow:hidden; background:#111; }
.artwork-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.artwork-visual-body { padding:22px 28px; }

/* audio */
.artwork-audio-body { padding:28px 28px; }
.audio-player { margin:20px 0 22px; display:flex; flex-direction:column; gap:14px; }
.audio-controls { display:flex; align-items:center; gap:14px; }
.btn-play {
    width:42px; height:42px; border-radius:50%;
    background:var(--gold); border:none; color:#111;
    font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:transform .2s;
}
.btn-play:hover { transform:scale(1.08); }
.audio-info { display:flex; flex-direction:column; gap:3px; }
.audio-track { font-size:14px; color:var(--text); }
.audio-movement { font-size:12px; color:var(--text-dim); }
.audio-progress-wrap { display:flex; align-items:center; gap:10px; }
.audio-progress {
    flex:1; height:3px;
    background:var(--surface2); border-radius:2px; cursor:pointer;
}
.audio-progress-fill {
    height:100%; background:var(--gold); border-radius:2px;
    width:0%; pointer-events:none;
}
.audio-time { font-size:11px; color:var(--text-faint); min-width:36px; text-align:right; }
.audio-placeholder { font-size:12px; color:var(--text-faint); }

.reveal-actions {
    display:flex; gap:12px; justify-content:center; padding-bottom:20px;
}
.btn-collect {
    padding:13px 32px;
    background:var(--gold); border:none; border-radius:50px;
    color:#111; font-family:inherit; font-size:15px; font-weight:600;
    cursor:pointer; transition:all .25s;
}
.btn-collect:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,169,110,.35); }
.btn-collect.collected {
    background:var(--surface2); color:var(--gold);
    border:1px solid var(--gold);
}
.btn-redraw {
    padding:13px 24px;
    background:none; border:1px solid var(--border); border-radius:50px;
    color:var(--text-dim); font-family:inherit; font-size:15px;
    cursor:pointer; transition:all .25s;
}
.btn-redraw:hover { border-color:var(--border-hover); color:var(--text); }

.btn-download {
    width:48px; height:48px; border-radius:50%;
    background:none; border:1px solid var(--border);
    color:var(--text-dim); font-size:18px; font-weight:600;
    cursor:pointer; transition:all .25s; flex-shrink:0;
}
.btn-download:hover { border-color:var(--border-hover); color:var(--gold); }
.btn-download.loading { opacity:.5; pointer-events:none; }

/* watermark — hidden by default, shown only during capture */
.card-watermark {
    display:none;
    align-items:center; gap:8px;
    padding:12px 20px;
    border-top:1px solid var(--border);
    background:var(--surface);
}
.card-watermark.visible { display:flex; }
.wm-logo {
    font-family:'Cinzel', serif; font-size:13px;
    color:var(--gold); letter-spacing:.12em;
    border:1px solid rgba(201,169,110,.4);
    padding:2px 6px; border-radius:4px;
}
.wm-name {
    font-family:'Cinzel', serif; font-size:11px;
    color:var(--text-dim); letter-spacing:.14em;
}

/* ════════════════════
   COLLECTION
════════════════════ */
.collection-header {
    width:100%; max-width:420px;
    display:flex; align-items:center; gap:16px;
    margin-bottom:28px; padding:0 20px;
}
.collection-header h2 { font-size:20px; font-weight:400; }

.collection-grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:12px; width:100%; max-width:420px; padding:0 20px;
}
.collection-item {
    border:1px solid var(--border); border-radius:var(--radius);
    background:var(--surface); padding:18px 16px;
    cursor:pointer; transition:all .25s;
    animation:fadeUp .3s ease both;
}
.collection-item:hover { border-color:var(--border-hover); transform:translateY(-3px); }
.collection-item-tag { font-size:10px; color:var(--gold); letter-spacing:.12em; margin-bottom:8px; opacity:.7; }
.collection-item-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:4px; }
.collection-item-creator { font-size:12px; color:var(--text-dim); }

.collection-empty { display:none; color:var(--text-faint); font-size:14px; margin-top:60px; }

/* ════════════════════
   EXPLORE FAB
════════════════════ */
.btn-explore-fab {
    position:fixed; bottom:192px; right:20px;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text-dim); font-size:18px;
    cursor:pointer; z-index:100;
    transition:all .25s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.btn-explore-fab:hover { border-color:var(--border-hover); transform:scale(1.08); color:var(--gold); }

.btn-credits-fab {
    position:fixed; bottom:248px; right:20px;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text-dim); font-size:18px;
    cursor:pointer; z-index:100;
    transition:all .25s;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.btn-credits-fab:hover { border-color:var(--border-hover); transform:scale(1.08); color:var(--gold); }

/* ════════════════════
   CREDITS SCREEN
════════════════════ */
#screen-credits { background:var(--bg); overflow-y:auto; }

.credits-wrap {
    max-width:680px;
    margin:0 auto;
    padding:60px 24px 120px;
}

.credits-title {
    font-family:'Cinzel', serif;
    font-size:24px;
    color:var(--gold);
    letter-spacing:.16em;
    text-align:center;
    margin-top:40px;
    margin-bottom:8px;
    font-weight:400;
}
.credits-sub {
    text-align:center;
    color:var(--text-faint);
    font-size:12px;
    letter-spacing:.08em;
    margin-bottom:48px;
}

.credits-section {
    margin-bottom:48px;
}
.credits-section h3 {
    font-size:13px;
    color:var(--text-dim);
    letter-spacing:.18em;
    font-weight:400;
    border-bottom:1px solid var(--border);
    padding-bottom:8px;
    margin-bottom:20px;
}

.credits-list {
    list-style:none;
    padding:0;
    margin:0 0 16px 0;
}
.credit-item {
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    padding:10px 0;
    border-bottom:1px solid rgba(201,169,110,0.05);
    font-size:13px;
    color:var(--text-dim);
    line-height:1.6;
}
.credit-item:last-child { border-bottom:none; }
.credit-item-compact {
    padding:6px 0;
    font-size:12px;
    gap:6px 10px;
}

.credit-title {
    color:var(--text);
    font-weight:400;
}
a.credit-title { text-decoration:none; }
a.credit-title:hover { color:var(--gold); }

.credit-creator { color:var(--text-dim); }
.credit-performer { color:var(--text-faint); font-size:12px; }
.credit-note-inline { color:var(--text-faint); font-size:11px; font-style:italic; }
.credit-todo { color:var(--gold); }
.credit-license {
    color:var(--text-faint);
    font-size:11px;
    letter-spacing:.05em;
    margin-left:auto;
}
.credit-license-fairuse { color:rgba(201,169,110,.55); }

.credits-note {
    color:var(--text-faint);
    font-size:11px;
    line-height:1.7;
    letter-spacing:.02em;
    margin-top:16px;
}
.credits-note a, .credits-footer a {
    color:var(--text-dim);
    text-decoration:underline;
    text-decoration-color:rgba(201,169,110,0.2);
}
.credits-note a:hover, .credits-footer a:hover { color:var(--gold); }

.credits-text {
    font-size:13px;
    color:var(--text-dim);
    line-height:1.8;
    letter-spacing:.02em;
}

.credits-footer {
    margin-top:64px;
    padding-top:24px;
    border-top:1px solid var(--border);
    text-align:center;
    color:var(--text-faint);
    font-size:11px;
    letter-spacing:.05em;
}

/* ════════════════════
   EXPLORE SCREEN
════════════════════ */
#screen-explore {
    padding-top:28px;
    padding-bottom:80px;
    align-items:flex-start;
}

.explore-header {
    width:100%;
    display:flex; align-items:center; gap:16px;
    margin-bottom:20px; padding:0 20px;
}
.explore-header h2 { font-size:20px; font-weight:400; }

.explore-rows {
    width:100%;
    display:flex; flex-direction:column;
    gap:32px;
}

.explore-row {
    display:flex; flex-direction:column;
    gap:10px;
}

.explore-row-label {
    font-size:11px; color:var(--text-faint);
    letter-spacing:.15em;
    padding:0 20px;
}

.explore-row-outer {
    overflow:hidden;
    position:relative;
    width:100%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.explore-row-track {
    display:flex;
    gap:12px;
    padding:4px 60px;
    will-change:transform;
    user-select:none;
}

/* small explore cards */
.explore-card {
    flex-shrink:0;
    width:140px;
    border-radius:14px;
    background:var(--surface);
    border:1px solid var(--border);
    overflow:hidden;
    cursor:pointer;
    transition:border-color .25s, transform .25s;
    display:flex; flex-direction:column;
}
.explore-card:hover {
    border-color:var(--border-hover);
    transform:translateY(-3px);
}

.explore-card-img {
    width:100%; height:100px;
    object-fit:cover; display:block;
    background:var(--surface2);
}

.explore-card-img-placeholder {
    width:100%; height:100px;
    background:linear-gradient(135deg, var(--surface2), #1a1a2e);
    display:flex; align-items:center; justify-content:center;
    font-size:28px;
    color:var(--gold);
    opacity:.4;
}

.explore-card-body {
    padding:10px 12px 12px;
    display:flex; flex-direction:column;
    gap:4px; flex:1;
}

.explore-card-tag {
    font-size:9px; color:var(--gold);
    letter-spacing:.12em; opacity:.7;
}

.explore-card-title {
    font-size:12px; font-weight:600;
    color:var(--text);
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.explore-card-creator {
    font-size:11px; color:var(--text-dim);
    margin-top:auto;
}

.explore-card-quote {
    font-size:10px; color:var(--text-dim);
    line-height:1.6;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-style:italic;
    margin-top:4px;
}