@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

body {
    font-family: 'Press Start 2P', cursive;
    background-color: #1a1a2e;
    min-height: 100vh;
    color: #eee;
    padding: 20px;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input, textarea { -webkit-user-select: text; user-select: text; }

/* ========================================
   PARALLAX STARFIELD BACKGROUND
   ======================================== */
.starfield-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; /* Extra height for parallax room */
    background-image: url('/static/images/backgrounds/Stars.png');
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
    will-change: transform;
}

/* ========================================
   TWINKLING STARS OVERLAY
   ======================================== */
.stars-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Cross-shaped twinkling stars */
.twinkle-star {
    position: absolute;
    width: 1px;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0;
    opacity: 0;
    animation: twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.twinkle-star::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -2px;
    width: 5px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.twinkle-star.bright {
    height: 7px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

.twinkle-star.bright::before {
    width: 7px;
    left: -3px;
    top: 3px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

.twinkle-star.colored {
    background: rgba(136, 204, 255, 0.5);
}

.twinkle-star.colored::before {
    background: rgba(136, 204, 255, 0.5);
}

.twinkle-star.golden {
    background: rgba(243, 156, 18, 0.5);
}

.twinkle-star.golden::before {
    background: rgba(243, 156, 18, 0.5);
}

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
}

/* Shooting star - rare and magical */
.shooting-star {
    position: absolute;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transform: rotate(-45deg);
    animation: shoot 1s ease-out forwards;
    animation-delay: var(--delay);
}

@keyframes shoot {
    0% { opacity: 0; transform: rotate(-45deg) translateX(-100px); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-45deg) translateX(300px); }
}

/* ========================================
   STARRY WINDOW — recessed star-field panel
   ======================================== */
.starry-window {
    position: relative; overflow: hidden;
    background: url('/static/images/backgrounds/Stars.png') repeat #0a0a0f;
    border-style: solid; border-width: 4px;
    border-color: #252530 #555565 #6a6a7a #404050;
    box-shadow: inset 0 0 20px 8px rgba(0,0,0,0.9);
}
.starry-window:active > * { transform: translateY(2px); }
input.starry-window:active, .starry-window.sw-no-press:active > * { transform: none; }
.sw-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.starry-window > *:not(.sw-stars) { position: relative; z-index: 1; }

/* ========================================
   PAGE LOAD ANIMATIONS
   ======================================== */
header {
    opacity: 0;
    transform: translateY(-20px);
    animation: headerReveal 0.6s ease-out forwards;
    animation-delay: 0.1s;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes headerReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.branch {
    opacity: 0;
    transform: translateY(30px);
    animation: branchReveal 0.5s ease-out forwards;
    animation-delay: calc(0.3s + var(--branch-index, 0) * 0.1s);
}

/* Skip animation after initial load */
.branches-loaded .branch {
    animation: none;
    opacity: 1;
    transform: none;
}

@keyframes branchReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title appears above character panel */
.character-panel {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.character-frame {
    width: 100%;
    max-width: 400px;
    flex: 1;
    border: 4px solid #f39c12;
    background-image: url('/static/images/backgrounds/Forest.png');
    background-size: cover;
    background-position: center 65%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    image-rendering: pixelated;
    box-shadow: inset 5px 5px 6px rgba(0,0,0,0.6);
}

.character-sprite {
    width: 210px;
    height: 210px;
    image-rendering: pixelated;
    object-fit: contain;
    margin-bottom: -10px;
}

.character-name {
    margin-top: 10px;
    font-size: 14px;
    color: #f39c12;
    text-shadow: 2px 2px 0px #000;
}

.stats-panel {
    order: -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

h1 {
    font-size: 24px;
    background: linear-gradient(180deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(2px 2px 0px #000);
}

.title-icon {
    font-size: 32px;
    -webkit-text-fill-color: initial;
    background: none;
    filter: drop-shadow(2px 2px 0px #000);
}

/* Segmented Steel XP Bar */
.xp-bar {
    background: #1a1a2e;
    height: 24px;
    width: 100%;
    position: relative;
    border: 3px solid;
    border-color: #4a4a5e #2a2a3e #1a1a28 #3a3a50;
    display: flex;
    gap: 3px;
    padding: 3px;
}

.xp-seg {
    flex: 1;
    background: #2a2a42;
    border-style: solid;
    border-width: 2px;
    border-color: #50506a #101020 #0a0a15 #40405a;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.xp-seg.on {
    background: #c07a10;
    border-color: #f0c860 #603800 #402000 #e0a830;
    box-shadow: 0 0 4px rgba(243,156,18,0.3);
    animation: xpEnergyWave 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}

@keyframes xpEnergyWave {
    0%, 100% {
        background: #c07a10;
        border-color: #f0c860 #603800 #402000 #e0a830;
        box-shadow: 0 0 4px rgba(243,156,18,0.3);
    }
    50% {
        background: #f5b030;
        border-color: #ffe080 #805010 #603808 #f0d050;
        box-shadow: 0 0 8px rgba(243,156,18,0.6), 0 0 16px rgba(243,156,18,0.3);
    }
}

.xp-seg.flash {
    background: #fff !important;
    box-shadow: 0 0 10px #fff !important;
    transition: none !important;
}

.lvl-up-text {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    font-size: 8px;
    color: #f1c40f;
    text-shadow: 0 0 8px #f1c40f, 0 0 16px rgba(241, 196, 15, 0.5);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
}

.lvl-up-text.pop {
    animation: lvlUpPop 1.2s ease-out forwards;
}

@keyframes lvlUpPop {
    0% { opacity: 0; top: 0px; transform: translateX(-50%) scale(0.5); }
    15% { opacity: 1; top: -24px; transform: translateX(-50%) scale(1.3); }
    30% { transform: translateX(-50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; top: -34px; }
}

.lvl-up-text.sad {
    color: #e74c3c;
    text-shadow: 0 0 8px #e74c3c, 0 0 16px rgba(231, 76, 60, 0.5);
}

.lvl-up-text.drop {
    animation: lvlDownDrop 1.2s ease-out forwards;
}

@keyframes lvlDownDrop {
    0% { opacity: 0; top: -24px; transform: translateX(-50%) scale(0.5); }
    15% { opacity: 1; top: 0px; transform: translateX(-50%) scale(1.3); }
    30% { transform: translateX(-50%) scale(1); top: -4px; }
    70% { opacity: 1; }
    100% { opacity: 0; top: 6px; }
}

.xp-seg.red-flash {
    background: #c0392b !important;
    box-shadow: 0 0 8px #e74c3c !important;
    transition: none !important;
}

.xp-text {
    display: none;
}

.streak-info {
    font-size: 10px;
    color: #aaa;
    text-shadow: 1px 1px 0px #000;
}

.streak-info span {
    color: #2ecc71;
}

.skill-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.branch {
    background: #3a3a4a;
    padding: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.branch-body {
    display: flex;
    gap: 0;
}

.branch-col-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 6px;
    transition: max-height var(--expand-dur, 0.8s) ease-in-out;
}

.branch-col-right {
    width: 120px;
    min-width: 120px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   BRANCH CONTROLS — Embossed minimize/rearrange buttons
   ═══════════════════════════════════════════════════════ */
.branch-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ctrl-emboss {
    width: 32px;
    height: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.ctrl-toggle {
    width: 32px;
    height: 28px;
    position: relative;
    overflow: hidden;
}

.ctrl-toggle .emboss-line {
    height: 12px;
    width: 100%;
    background: #3a3a4a;
    border: 2px solid;
    border-color: #252530 #454555 #6a6a7a #353540;
    transition-property: width, height, border-width;
}

.branch.minimized .ctrl-toggle .emboss-line {
    height: 4px;
}

.ctrl-toggle:active .emboss-line {
    filter: brightness(1.3);
}

.ctrl-rearrange {
    gap: 3px;
}

.emboss-bar {
    width: 100%;
    height: 4px;
    background: #3a3a4a;
    border: 2px solid;
    border-color: #252530 #454555 #6a6a7a #353540;
}

.ctrl-rearrange.dragging .emboss-bar {
    filter: brightness(1.3);
}

/* ═══════════════════════════════════════════════════════
   MINIMIZE STATE — hide branch content
   ═══════════════════════════════════════════════════════ */
.branch.minimized .branch-body {
    max-height: 0;
    overflow: hidden;
}

.branch-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
}

.branch-header .branch-controls {
    margin-left: auto;
}

.branch-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.branch-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    position: relative;
    overflow: hidden;
    font-size: 16px;
    line-height: 1;
    border-style: solid;
    border-width: 4px;
    background: var(--branch-color);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    display: flex;
    align-items: center;
    justify-content: center;
    filter:
        drop-shadow(1px 0 0 #3a3a4a)
        drop-shadow(-1px 0 0 #3a3a4a)
        drop-shadow(0 1px 0 #3a3a4a)
        drop-shadow(0 -1px 0 #3a3a4a);
}

.branch-icon:active { transform: scale(0.9); }

.branch-icon .icon-hold-ring {
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    pointer-events: none;
}

.branch-icon.holding .icon-hold-ring {
    animation: holdPulse 0.75s ease-in-out forwards;
}

@keyframes holdPulse {
    0% { border-color: transparent; box-shadow: none; }
    50% { border-color: #f39c12; box-shadow: 0 0 12px rgba(243, 156, 18, 0.5); }
    100% { border-color: #f39c12; box-shadow: 0 0 20px rgba(243, 156, 18, 0.8); }
}

.branch-emoji {
    line-height: 1;
    margin-top: -4px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}

/* Branch icon border colors are now set dynamically via inline styles */

.branch h2 {
    font-size: 14px;
    text-shadow: 2px 2px 0px #000;
}


/* ========================================
   STATS TV — inset black box per branch
   ======================================== */
.stats-tv {
    background: #222;
    border: 3px solid;
    border-color: #252530 #555565 #6a6a7a #404050;
    box-shadow: inset 1.5px 1.5px 2px rgba(0,0,0,0.6);
    margin-top: auto;
    padding: 0 6px 3px 6px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.stats-tv.tv-wake {
    animation: tvWake 0.5s ease-out;
}

@keyframes tvWake {
    0% { box-shadow: inset 1.5px 1.5px 2px rgba(0,0,0,0.6); }
    30% { box-shadow: inset 1.5px 1.5px 2px rgba(0,0,0,0.6), inset 0 0 12px var(--branch-glow-soft), 0 0 8px var(--branch-glow-soft); }
    100% { box-shadow: inset 1.5px 1.5px 2px rgba(0,0,0,0.6); }
}

/* --- Stats content (level row + bar, always visible) --- */
.tv-stats {
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tv-stats.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

/* Level row */
.tv-row {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    font-size: 9px;
    padding-top: 1px;
}

.tv-label {
    color: #888;
}

/* Orb bar */
.tv-orb-track {
    display: flex;
    gap: 2px;
    height: 8px;
    padding: 1px;
    background: #555;
    margin-top: 1px;
}

.tv-seg {
    flex: 1;
    background: #222;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.tv-seg.on {
    background: var(--branch-color);
    box-shadow: 0 0 4px var(--branch-color), 0 0 8px var(--branch-glow);
}

.tv-seg.flash {
    background: #fff !important;
    box-shadow: 0 0 8px #fff !important;
    transition: none !important;
}

.tv-seg.red-flash {
    background: #e74c3c !important;
    box-shadow: 0 0 8px #e74c3c !important;
    transition: none !important;
}

/* Level value — inline in tv-row */
.tv-lvl {
    color: var(--branch-color);
    text-shadow: 0 0 6px var(--branch-glow);
    transition: opacity 0.15s ease;
}

.tv-lvl.lvl-flash {
    animation: lvlPop 0.8s ease-out;
}

@keyframes lvlPop {
    0% { transform: scale(1); }
    20% { transform: scale(1.5); color: #f1c40f; text-shadow: 0 0 14px #f1c40f, 0 0 28px rgba(241,196,15,0.4), 2px 2px 0 #000; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ========================================
   TV ORB — materializes in the TV
   ======================================== */
.tv-orb-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

.tv-orb {
    position: absolute;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 0 8px var(--branch-glow))
        drop-shadow(0 0 20px var(--branch-glow-soft));
    opacity: 0;
    transform: scale(0);
    transition: none;
}

.tv-orb.materialize {
    animation: orbMaterialize 0.5s cubic-bezier(0.15, 0.9, 0.35, 1.1) forwards;
}

@keyframes orbMaterialize {
    0% { opacity: 0; transform: scale(0); }
    40% { opacity: 1; transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.tv-orb.floating {
    opacity: 1; transform: scale(1);
    animation: orbFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--branch-glow)) drop-shadow(0 0 20px var(--branch-glow-soft));
}

@keyframes orbFloat {
    0%   { transform: translate(0px, 0px) scale(1); }
    15%  { transform: translate(1.5px, -1px) scale(1.02); }
    30%  { transform: translate(-1px, 1.5px) scale(0.98); }
    50%  { transform: translate(0.5px, -2px) scale(1.01); }
    65%  { transform: translate(-1.5px, 0px) scale(0.99); }
    80%  { transform: translate(1px, 1px) scale(1.02); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.tv-orb.fly-away {
    animation: orbFlyAway 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes orbFlyAway {
    0% { opacity: 1; transform: scale(1) translate(0, 0); }
    30% { opacity: 1; transform: scale(1.2) translate(0, -5px); }
    100% { opacity: 0; transform: scale(0.3) translate(0, -80px); }
}

/* TV Orb glow pulse */
.tv-orb-glow {
    position: absolute;
    width: 28px; height: 28px;
    background: radial-gradient(circle, var(--branch-glow) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.tv-orb-glow.pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%   { opacity: 0.3; transform: scale(1); }
    50%  { opacity: 0.6; transform: scale(1.3); }
    100% { opacity: 0.3; transform: scale(1); }
}

/* ========================================
   TV SCROLL — materializes in the TV
   ======================================== */
.tv-scroll {
    position: absolute;
    font-size: 20px;
    line-height: 1;
    opacity: 0;
    transform: scale(0);
    transition: none;
    filter: drop-shadow(0 0 8px var(--gold-glow, rgba(243,156,18,0.4)));
}

.tv-scroll.materialize {
    animation: scrollMaterialize 0.5s cubic-bezier(0.15, 0.9, 0.35, 1.1) forwards;
}

@keyframes scrollMaterialize {
    0% { opacity: 0; transform: scale(0) rotate(-20deg); filter: drop-shadow(0 0 0px var(--gold, #f39c12)); }
    40% { opacity: 1; transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 16px var(--gold, #f39c12)); }
    70% { transform: scale(0.95) rotate(-2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px var(--gold-glow, rgba(243,156,18,0.4))); }
}

.tv-scroll.floating {
    opacity: 1; transform: scale(1);
    animation: scrollFloat 3.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--gold-glow, rgba(243,156,18,0.4)));
}

@keyframes scrollFloat {
    0%   { transform: translate(0px, 0px) scale(1) rotate(0deg); }
    20%  { transform: translate(-1px, -1.5px) scale(1.02) rotate(1deg); }
    40%  { transform: translate(1px, 1px) scale(0.98) rotate(-1deg); }
    60%  { transform: translate(0.5px, -1px) scale(1.01) rotate(0.5deg); }
    80%  { transform: translate(-1.5px, 0.5px) scale(0.99) rotate(-0.5deg); }
    100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
}

.tv-scroll.fly-away {
    animation: scrollFlyAway 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scrollFlyAway {
    0% { opacity: 1; transform: scale(1) translate(0, 0); }
    30% { opacity: 1; transform: scale(1.2) translate(0, -5px); }
    100% { opacity: 0; transform: scale(0.3) translate(0, -80px); }
}

/* TV Scroll glow pulse */
.tv-scroll-glow {
    position: absolute;
    width: 44px; height: 44px;
    background: radial-gradient(circle, var(--gold-glow, rgba(243,156,18,0.4)) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.tv-scroll-glow.pulse {
    animation: scrollGlowPulse 2.2s ease-in-out infinite;
}

@keyframes scrollGlowPulse {
    0%   { opacity: 0.2; transform: scale(1); }
    50%  { opacity: 0.5; transform: scale(1.4); }
    100% { opacity: 0.2; transform: scale(1); }
}

.xp-fraction {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 7px;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 1px 1px 0px #000;
    z-index: 10;
    font-family: 'Press Start 2P', cursive;
    pointer-events: none;
}

/* Branch colors are now set dynamically via inline CSS variables from JS (getBranchVisuals) */



/* Branch icon backgrounds handled by canvas cutout */


.tasks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    position: relative;
}

.frequency-toggle {
    background: linear-gradient(180deg, #9b59b6, #8e44ad);
    padding: 0;
    height: 36px;
    cursor: pointer;
    border-style: solid;
    border-width: 4px;
    border-color: #bb79d6 #6e3490 #5a2a75 #8050a5;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

@media (hover: hover) {
    .frequency-toggle:hover {
        box-shadow: 0 0 8px rgba(155, 89, 182, 0.4), 0 0 15px rgba(155, 89, 182, 0.2);
    }
}

.frequency-toggle:active,
.frequency-toggle.pressed {
    border-color: #5a2a75 #8050a5 #bb79d6 #6e3490;
    box-shadow: none;
    transform: translate(2px, 2px);
}

.frequency-toggle .freq-icon {
    font-size: 16px;
    margin-bottom: 4px;
}

.frequency-toggle .freq-label {
    font-size: 11px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000;
}

.frequency-toggle .freq-cycle {
    font-size: 8px;
    opacity: 0.7;
    margin-top: 2px;
    text-shadow: 1px 1px 0px #000;
}

.task {
    display: flex;
    height: 36px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-size: 10px;
    transition: box-shadow 0.15s ease, transform 0.08s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    position: relative;
}

.task-type {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4a4a5a;
    border-style: solid;
    border-color: #8a8a9a #454555 #303040 #555565;
    border-width: 4px 2px 4px 4px;
}

.task-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 12px;
    background: #4a4a5a;
    border-style: solid;
    border-color: #8a8a9a #454555 #303040 #555565;
    border-width: 4px 4px 4px 2px;
    position: relative;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.indicator-orb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-orb canvas {
    image-rendering: pixelated;
    display: block;
}

.merged-orb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.merged-result {
    cursor: pointer;
}

.merged-result .task-type,
.merged-result .task-content {
    overflow: visible;
}

.indicator-quest {
    font-size: 12px;
    line-height: 1;
}

/* Hover only on devices that support it (not touch) */
@media (hover: hover) {
    .task:hover {
        box-shadow: 0 0 8px var(--branch-glow, rgba(52, 152, 219, 0.4)),
                    0 0 15px var(--branch-glow-soft, rgba(52, 152, 219, 0.2));
    }
}

/* Press down — invert bevels, translate down, kill shadow (content only) */
.task:active {
    box-shadow: none;
}
.task:active .task-content {
    border-color: #303040 #555565 #8a8a9a #454555;
    transform: translate(2px, 2px);
}

/* Completed press — invert branch-color bevels */
.task.completed:active .task-content {
    border-color: var(--branch-border-bottom) var(--branch-border-left) var(--branch-border-top) var(--branch-border-right);
    transform: translate(2px, 2px);
}

/* Locked — no press effect */
.task.locked:active {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.task.locked:active .task-content {
    transform: none;
}

/* Completed - only the right segment lights up */
.task.completed .task-content {
    background: var(--branch-color);
    border-color: var(--branch-border-top) var(--branch-border-right) var(--branch-border-bottom) var(--branch-border-left);
    border-left-width: 2px;
    color: #3a3a4a;
    text-shadow: 1px 1px 0px var(--branch-border-top);
}

@media (hover: hover) {
    .task.completed:hover {
        box-shadow: 0 0 8px var(--branch-glow, rgba(52, 152, 219, 0.4)),
                    0 0 15px var(--branch-glow-soft, rgba(52, 152, 219, 0.2));
    }
}

.task.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.task.locked:hover {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.task-name {
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    position: relative;
    text-shadow: 1px 1px 0px #000;
}
.task.completed .task-name {
    text-shadow: 1px 1px 0px var(--branch-border-top);
}

.task-name-text {
    display: inline-block;
}

/* ── Expand arrow + overlay for long task names ── */

/* Expand arrow — wide touch zone, task-content bleeds under transparent left half */
.task-expand-arrow {
    width: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    cursor: pointer;
    font-size: 8px;
    color: var(--branch-color);
    position: relative;
    background: linear-gradient(to right, transparent 74%, #4a4a5a 74%);
    -webkit-tap-highlight-color: transparent;
    border-style: solid;
    border-color: #8a8a9a #454555 #303040 transparent;
    border-width: 4px 4px 4px 0;
    transition: color 0.15s ease;
}
.task.completed .task-expand-arrow {
    background: linear-gradient(to right, transparent 74%, var(--branch-color) 74%);
    border-color: var(--branch-border-top) var(--branch-border-right) var(--branch-border-bottom) transparent;
    color: #3a3a4a;
}
.task.has-expand .task-content {
    margin-right: -46px;
    border-right-width: 0;
}

/* Countdown badge for quests in Weekly/Monthly views */
.task-countdown {
    width: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ff4444;
    background: #4a4a5a;
    border-style: solid;
    border-color: #8a8a9a #454555 #303040 #555565;
    border-width: 4px 4px 4px 2px;
    text-shadow: 0 0 4px rgba(255, 68, 68, 0.6);
}
.task.completed .task-countdown {
    background: var(--branch-color);
    border-color: var(--branch-border-top) var(--branch-border-right) var(--branch-border-bottom) var(--branch-border-left);
    color: #3a3a4a;
    text-shadow: none;
}
.task.has-countdown .task-content {
    border-right-width: 0;
}
.task.has-countdown.has-expand .task-content {
    margin-right: 0;
}
.task.has-countdown.has-expand .task-countdown {
    border-right-width: 0;
}
.task.has-countdown .task-expand-arrow {
    width: 20px;
    background: #4a4a5a;
    border-left-color: #555565;
    border-left-width: 2px;
}
.task.has-countdown.completed .task-expand-arrow {
    background: var(--branch-color);
    border-left-color: var(--branch-border-left);
}

.task.expanded {
    position: relative;
    z-index: 10;
}

.task-expand-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 12px;
    background: #4a4a5a;
    border-style: solid;
    border-color: #8a8a9a #454555 #303040 #555565;
    border-width: 4px 4px 4px 2px;
    font-size: 10px;
    line-height: 1.4;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    z-index: 10;
}
.task.completed .task-expand-overlay {
    background: var(--branch-color);
    border-color: var(--branch-border-top) var(--branch-border-right) var(--branch-border-bottom) var(--branch-border-left);
    color: #3a3a4a;
    text-shadow: 1px 1px 0px var(--branch-border-top);
}

.task-close-btn {
    margin-left: 10px;
    color: var(--branch-color);
    font-size: 8px;
    flex-shrink: 0;
}
.task.completed .task-close-btn {
    color: #3a3a4a;
}


.loading {
    text-align: center;
    padding: 50px;
    font-size: 12px;
    text-shadow: 1px 1px 0px #000;
}

/* Connection Status Indicator */
.connection-status-row {
    max-width: 900px;
    margin: 16px auto 12px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-status-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.connection-status-dot.offline {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.5);
}

.connection-status-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: #3a5a44;
    transition: color 0.4s ease;
}

.connection-status-text.offline {
    color: #8b3a3a;
}

/* Developer Tools */
.dev-tools {
    max-width: 900px;
    margin: 40px auto 0;
    background: #2a2a3a;
    padding: 20px;
    border: 3px solid #555;
    box-shadow: 5px 5px 0px #000;
}

.dev-tools h3 {
    color: #888;
    font-size: 12px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0px #000;
}

.dev-tools-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cache-color-indicator {
    height: 28px;
    border-style: solid;
    border-width: 3px;
    border-color: #555565 #252530 #252530 #555565;
    margin: 8px 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

.dev-tools label {
    font-size: 10px;
    color: #aaa;
    text-shadow: 1px 1px 0px #000;
}

.dev-tools input[type="date"] {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 8px;
    background: #1a1a2a;
    border: 2px solid #444;
    color: #eee;
}

.dev-tools button {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 8px 15px;
    cursor: pointer;
    border-style: solid;
    border-width: 3px;
    border-color: rgba(255,255,255,0.3) rgba(0,0,0,0.3) rgba(0,0,0,0.4) rgba(255,255,255,0.2);
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 3px 3px 0px #000;
    transition: all 0.1s;
}

.dev-tools button:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px #000;
}

.dev-tools button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
    text-shadow: none;
}

.btn-blue { background: #3498db; }
.btn-green { background: #2ecc71; }
.btn-orange { background: #e67e22; }
.btn-red { background: #444; color: #e74c3c; }

.dev-tools .current-date {
    font-size: 10px;
    color: #888;
    text-shadow: 1px 1px 0px #000;
}

.dev-test-panel {
    margin-top: 15px;
    border-top: 2px solid #444;
    padding-top: 10px;
}

.dev-test-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 10px;
    color: #f39c12;
    padding: 5px 0;
}

.dev-test-arrow {
    transition: transform 0.2s;
    font-size: 8px;
}

.dev-test-panel.open .dev-test-arrow {
    transform: rotate(90deg);
}

.dev-test-content {
    display: none;
    padding-top: 10px;
}

.dev-test-panel.open .dev-test-content {
    display: block;
}

.dev-test-section {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dev-test-section label {
    font-size: 10px;
    color: #aaa;
}

.dev-test-section select {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    padding: 6px 10px;
    background: #1a1a2a;
    border: 2px solid #444;
    color: #eee;
    flex: 1;
}

.orb-inventory {
    display: flex;
    gap: 15px;
    align-items: center;
}

.orb-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
}

.orb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px currentColor, inset 2px 2px 4px rgba(255,255,255,0.4);
}

.orb-habit-tracking { background: var(--branch-color, #3498db); color: var(--branch-color, #3498db); }
.orb-wellness { background: var(--branch-color, #2ecc71); color: var(--branch-color, #2ecc71); }
.orb-home { background: var(--branch-color, #f1c40f); color: var(--branch-color, #f1c40f); }
.orb-love { background: var(--branch-color, #e91e63); color: var(--branch-color, #e91e63); }
.orb-fitness { background: var(--branch-color, #1abc9c); color: var(--branch-color, #1abc9c); }
.orb-total { background: var(--branch-color, #2ecc71); color: var(--branch-color, #2ecc71); }

/* Calendar Widget */
.calendar-widget {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cal-page {
    display: flex;
    flex-direction: column;
    border: 3px solid;
    border-color: #ffc060 #804010 #804010 #ffc060;
    box-shadow:
        inset 2px 2px 0px rgba(255,255,255,0.2),
        inset -2px -2px 0px rgba(0,0,0,0.3),
        3px 3px 6px rgba(0,0,0,0.5);
}

.cal-month {
    font-size: 10px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #e67e22;
    padding: 2px 8px;
    text-align: center;
    border-bottom: 2px solid #c56a10;
}

.cal-number {
    font-size: 18px;
    color: #f39c12;
    background: #2a2010;
    padding: 2px 8px;
    text-align: center;
    min-width: 50px;
}

.cal-day {
    font-size: 10px;
    color: #e67e22;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 5px;
}

.character-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.character-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.character-title .title-name {
    font-size: 18px;
    color: #f39c12;
    text-shadow: 2px 2px 0px #000;
}

.character-title .title-level {
    font-size: 14px;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.6), 2px 2px 0px #000;
    transition: color 0.4s, text-shadow 0.4s;
}

.character-title .title-level.level-up-flash {
    animation: titleLevelUp 1s ease-out forwards;
}

@keyframes titleLevelUp {
    0% { transform: scale(1); color: #2ecc71; }
    15% { transform: scale(1.8); color: #f1c40f; text-shadow: 0 0 16px #f1c40f, 0 0 30px rgba(241, 196, 15, 0.6), 2px 2px 0px #000; }
    40% { transform: scale(1.3); }
    60% { color: #f1c40f; text-shadow: 0 0 12px #f1c40f, 2px 2px 0px #000; }
    100% { transform: scale(1); color: #2ecc71; text-shadow: 0 0 8px rgba(46, 204, 113, 0.6), 2px 2px 0px #000; }
}

.character-title .title-level.level-down-flash {
    animation: titleLevelDown 0.8s ease-out forwards;
}

@keyframes titleLevelDown {
    0% { transform: scale(1); color: #2ecc71; }
    15% { transform: scale(0.6); color: #e74c3c; text-shadow: 0 0 12px #e74c3c, 2px 2px 0px #000; }
    40% { transform: scale(1.1); }
    60% { color: #e74c3c; text-shadow: 0 0 8px rgba(231, 76, 60, 0.5), 2px 2px 0px #000; }
    100% { transform: scale(1); color: #2ecc71; text-shadow: 0 0 8px rgba(46, 204, 113, 0.6), 2px 2px 0px #000; }
}

.character-xp {
    width: 100%;
}

.character-xp .xp-bar {
    width: 100%;
    height: 24px;
}

.character-xp .xp-text {
    display: none;
}

/* Character stats row — two-column layout */
.character-stats-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    margin-top: 10px;
    width: 100%;
}

.character-stats-row .calendar-widget {
    grid-row: 1 / -1;
    align-self: start;
}

.stats-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.stats-buttons .quest-hub-btn { width: 100%; }

.branch-orbs-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.orb-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #eee;
    animation: orbInlineGlow 3s ease-in-out infinite;
}

@keyframes orbInlineGlow {
    0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--orb-color, #ccc) 20%, transparent)); }
    50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--orb-color, #ccc) 50%, transparent)); }
}

.orb-inline .mini-orb {
    width: 26px;
    height: 26px;
    overflow: visible;
    image-rendering: pixelated;
}

.orb-inline span {
    color: var(--orb-glow, #ccc);
    text-shadow:
        0 0 4px var(--orb-glow, rgba(255,255,255,0.3)),
        0 0 10px var(--orb-glow, rgba(255,255,255,0.3)),
        0 0 20px var(--orb-glow, rgba(255,255,255,0.2));
}

.scroll-counter-inline {
    display: flex; align-items: center; gap: 4px;
    font-size: 10px; color: #f0d070; margin-right: auto;
}
.scroll-counter-emoji { font-size: 14px; }
.scroll-counter-bump { animation: scrollCounterBump 0.3s ease; }
@keyframes scrollCounterBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Scroll count inline — quest count overlaid on scroll emoji, same row as orbs */
.scroll-inline {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scrollInlineGlow 3s ease-in-out infinite;
}
.scroll-emoji {
    font-size: 22px;
    line-height: 0;
    display: block;
    margin-top: -6px;
    filter: drop-shadow(0 0 3px rgba(240,208,112,0.4));
}
.scroll-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #3a2210;
    text-shadow: none;
    font-weight: bold;
    pointer-events: none;
}
@keyframes scrollInlineGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(240,208,112,0.2)); }
    50% { filter: drop-shadow(0 0 6px rgba(240,208,112,0.5)); }
}

/* Canvas orb glow pulse (behind orb canvas) */
.orb-glow-pulse {
    border-radius: 50%;
    pointer-events: none;
    animation: orbGlowPulse 6s ease-in-out infinite;
}
@keyframes orbGlowPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* ========================================
   ORB CELEBRATION EFFECTS
   ======================================== */

/* Branch flash effect */
.branch.celebrating-flash {
    animation: branchFlash 0.4s ease-out;
}

@keyframes branchFlash {
    0%, 100% {
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    }
    50% {
        box-shadow:
            5px 5px 10px rgba(0,0,0,0.5),
            0 0 30px var(--branch-color),
            0 0 60px var(--branch-glow),
            inset 0 0 30px var(--branch-glow-soft);
    }
}

/* Flying orb projectile */
.flying-orb {
    position: fixed;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1102;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 0 6px var(--orb-color))
        drop-shadow(0 0 14px var(--orb-color))
        drop-shadow(0 0 28px var(--orb-color));
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Trail particles */
.flying-orb-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1101;
    animation: trailFade 0.4s ease-out forwards;
}

@keyframes trailFade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Target orb receiving glow */
.orb-inline.receiving .mini-orb {
    animation: orbReceive 0.5s ease-out;
}

@keyframes orbReceive {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.5);
        box-shadow:
            0 0 20px var(--orb-glow),
            0 0 40px var(--orb-glow);
    }
    100% {
        transform: scale(1);
    }
}

/* XP bar celebration — handled by JS segment flash now */

/* +1 floating text */
.orb-plus-text {
    position: fixed;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--orb-color, #2ecc71);
    text-shadow:
        2px 2px 0px #000,
        0 0 10px var(--orb-color, #2ecc71);
    pointer-events: none;
    z-index: 1102;
    animation: plusTextFloat 1s ease-out forwards;
}

@keyframes plusTextFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -40px) scale(0.8);
    }
}

/* ========================================
   EPIC CELEBRATION (Normal orb earn)
   ======================================== */

/* Screen flash overlay */
.celebration-screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1104;
    animation: celebrationFlashBang 0.4s ease-out forwards;
}

@keyframes celebrationFlashBang {
    0% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Firework burst particle */
.celebration-firework {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1102;
    animation: fireworkBurst var(--dur, 0.8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fireworkBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Shockwave ring */
.celebration-shockwave {
    position: fixed;
    border-radius: 50%;
    border: 3px solid var(--sw-color, #3498db);
    box-shadow: 0 0 10px var(--sw-color, #3498db), inset 0 0 10px var(--sw-color, #3498db);
    pointer-events: none;
    z-index: 1101;
    width: 0;
    height: 0;
    animation: shockwaveExpand 0.6s ease-out forwards;
}

@keyframes shockwaveExpand {
    0% { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%); }
    100% { width: 200px; height: 200px; opacity: 0; transform: translate(-50%, -50%); }
}

/* Screen shake */
html.screen-shaking,
.screen-shaking {
    animation: screenShake var(--shake-dur, 0.4s) ease-out !important;
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5px, 3px); }
    20% { transform: translate(4px, -4px); }
    30% { transform: translate(-3px, 2px); }
    40% { transform: translate(5px, -3px); }
    50% { transform: translate(-4px, 5px); }
    60% { transform: translate(3px, -2px); }
    70% { transform: translate(-2px, 4px); }
    80% { transform: translate(4px, -3px); }
    90% { transform: translate(-3px, 2px); }
}

/* Pixel confetti pieces */
.celebration-confetti {
    position: fixed;
    pointer-events: none;
    z-index: 1103;
    image-rendering: pixelated;
    animation: confettiFall var(--dur, 2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(var(--fall, 400px)) rotate(var(--rot, 720deg)) scale(0.3); opacity: 0; }
}

/* Lightning bolts */
.celebration-lightning {
    position: fixed;
    pointer-events: none;
    z-index: 1104;
    width: 4px;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 20px var(--bolt-color, #3498db);
    animation: lightningFlash 0.15s ease-out forwards;
    transform-origin: top center;
}

@keyframes lightningFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Celebration banner text */
.celebration-banner {
    font-family: 'Press Start 2P', cursive;
    pointer-events: none;
    z-index: 1107;
    max-width: 85vw;
    text-align: center;
    line-height: 1.4;
}

/* ========================================
   LEGENDARY CELEBRATION (All complete)
   ======================================== */

/* Massive screen shake with rotation */
.screen-shaking-massive {
    animation: screenShakeMassive var(--shake-dur, 0.8s) ease-out !important;
}

@keyframes screenShakeMassive {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-12px, 8px) rotate(-1deg); }
    20% { transform: translate(10px, -10px) rotate(1deg); }
    30% { transform: translate(-8px, 6px) rotate(-0.5deg); }
    40% { transform: translate(12px, -8px) rotate(1.5deg); }
    50% { transform: translate(-10px, 12px) rotate(-1deg); }
    60% { transform: translate(8px, -6px) rotate(0.5deg); }
    70% { transform: translate(-6px, 10px) rotate(-1.5deg); }
    80% { transform: translate(10px, -8px) rotate(1deg); }
    90% { transform: translate(-8px, 6px) rotate(-0.5deg); }
}

/* Mega orb that appears center screen */
.celebration-mega-orb {
    position: fixed;
    pointer-events: none;
    z-index: 1105;
    filter:
        drop-shadow(0 0 20px var(--mega-color))
        drop-shadow(0 0 50px var(--mega-color))
        drop-shadow(0 0 80px var(--mega-color));
    animation: megaOrbPulse 0.8s ease-in-out forwards;
}

@keyframes megaOrbPulse {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Raining orbs from the sky */
.celebration-rain-orb {
    position: fixed;
    pointer-events: none;
    z-index: 1100;
    filter: drop-shadow(0 0 5px var(--rain-color));
    animation: orbRain var(--dur, 1.5s) ease-in forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes orbRain {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(var(--fall, 500px)) rotate(360deg); opacity: 0; }
}

/* CRT scanline flash overlay */
.celebration-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1106;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 4px
    );
    animation: scanlineFlash 0.3s ease-out forwards;
    mix-blend-mode: multiply;
}

@keyframes scanlineFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========================================
   SAD ORB UNDO (Unchecking a task)
   ======================================== */

/* Sad orb flying back to branch */
.sad-flying-orb {
    position: fixed;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1102;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 0 6px rgba(231, 76, 60, 0.7))
        drop-shadow(0 0 14px rgba(231, 76, 60, 0.5))
        drop-shadow(0 0 28px rgba(231, 76, 60, 0.3));
    transition: all 0.5s cubic-bezier(0.6, 0, 0.4, 1);
    opacity: 0.8;
}

.sad-flying-orb.vanish-flash {
    filter:
        drop-shadow(0 0 12px rgba(231, 76, 60, 1))
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.8))
        drop-shadow(0 0 40px rgba(231, 76, 60, 0.6));
    transform: scale(1.3);
    opacity: 1;
    transition: all 0.15s ease-out;
}

.sad-flying-orb.vanish-out {
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s ease-in;
}

/* Sad trail - darker, fading */
.sad-orb-trail {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1101;
    background: #e74c3c;
    box-shadow: 0 0 4px rgba(231, 76, 60, 0.3);
    animation: sadTrailFade 0.3s ease-out forwards;
}

@keyframes sadTrailFade {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* Sad face emoji float */
.sad-face-float {
    position: fixed;
    font-size: 18px;
    pointer-events: none;
    z-index: 1103;
    animation: sadFaceFloat 1.2s ease-out forwards;
    filter: grayscale(0.3);
}

@keyframes sadFaceFloat {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    40% { opacity: 1; transform: translate(-50%, -15px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(0.6); }
}

/* -1 floating text */
.orb-minus-text {
    position: fixed;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #e74c3c;
    text-shadow:
        2px 2px 0px #000,
        0 0 6px rgba(231, 76, 60, 0.4);
    pointer-events: none;
    z-index: 1102;
    animation: minusTextFloat 1s ease-out forwards;
}

@keyframes minusTextFloat {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(0.7); }
}

/* Branch dim flash (opposite of celebration flash) */
.branch.sad-flash {
    animation: branchSadFlash 0.5s ease-out;
}

@keyframes branchSadFlash {
    0%, 100% {
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    }
    30% {
        box-shadow:
            5px 5px 10px rgba(0,0,0,0.5),
            0 0 15px rgba(231, 76, 60, 0.3),
            inset 0 0 20px rgba(231, 76, 60, 0.1);
    }
}

/* orbShrink removed — TV handles orb loss visually now */

/* Task Detail Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    padding: 20px;
    overflow: hidden;
}
#branchEditModal.active { z-index: 1001; }

.modal-overlay.active {
    display: block;
}
.modal-overlay.active .modal-content {
    animation: modalEnter 0.15s ease-out;
}
@keyframes modalEnter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-content {
    background: #2a2a3a;
    border: 4px solid #f39c12;
    max-width: 500px;
    width: calc(100% - 40px);
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Unified Modal — gold adventure theme */
.unified-modal {
    border-style: solid; border-width: 4px;
    border-color: #f39c12;
    box-shadow: 0 0 30px rgba(243,156,18,0.4);
    display: flex; flex-direction: column; max-height: 88vh;
    max-width: 400px;
    background: #2a2a3a;
    overflow: hidden;
}
.unified-modal .modal-header {
    background: rgba(0,0,0,0.2);
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
}
.um-header-title {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    text-align: center;
    background: linear-gradient(180deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px #000);
}
.um-type-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
    animation: catIconFloat 4s ease-in-out infinite, catIconGlow 3s ease-in-out infinite;
}
.um-icon-window {
    margin-bottom: 12px;
}
.um-icon-window:empty { display: none; }

/* Task preview — looks like a real task but is an editable input */
.um-task-preview {
    pointer-events: none;
}
.um-task-preview .task-content,
.um-task-preview .um-name-input {
    pointer-events: auto;
}
.um-task-preview:active { box-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.um-task-preview:active .task-content { transform: none; border-color: #8a8a9a #454555 #303040 #555565; }

.um-task-preview .um-orb-wrap {
    transition: filter 0.4s ease;
}
.um-orb-wrap canvas {
    display: block;
}
@keyframes umOrbGlow {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
.um-name-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 1px 1px 0px #000;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: left; outline: none;
    caret-color: #fff;
    animation: caretBlink 1s step-end infinite;
    background: transparent;
    border: none;
}
.um-name-input::placeholder {
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    opacity: 1 !important;
    font-size: 9px;
}
/* Unified modal single-panel body */
.um-body {
    padding: 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #3a3020 #1a1a2e;
    background: transparent;
}

.um-type-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
}
.um-type-section:empty {
    display: none;
}
.um-shared-section {
    margin-bottom: 6px;
}
.um-shared-section:empty {
    display: none;
}
.um-actions {
    display: flex;
    gap: 6px;
    padding: 0 15px 10px;
}
.um-date-toggle {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #6a5a38;
    padding: 8px 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: color 0.2s ease;
}
.um-date-toggle:hover {
    color: #f9e076;
    box-shadow: inset 0 0 20px 8px rgba(0,0,0,0.8), 0 0 4px rgba(243,156,18,0.15);
}
.um-date-content {
    overflow: hidden;
}
.um-date-content.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.um-date-content.expanded {
    opacity: 1;
    pointer-events: auto;
}

.modal-body {
    padding: 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

/* Sync status — removed 2026-02-27, see examples/sync-portal-animation.html */

/* Highlight effect for long-press */
.hq-todo-text.highlight-edit {
    background: rgba(243, 156, 18, 0.3);
    transition: background 0.2s ease;
}

/* Tilde cursor indicator */
.tilde-cursor {
    color: #f39c12;
    animation: tildeBlink 0.5s step-end infinite;
    margin-left: 2px;
}

@keyframes tildeBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.modal-header {
    background: transparent;
    padding: 15px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 12px;
    color: #f39c12;
    text-shadow: 2px 2px 0px #000;
}

.modal-close {
    background: #e74c3c;
    border-style: solid;
    border-width: 2px;
    border-color: #ff6b5b #b03a2e #962f25 #e55347;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 2px 2px 0px #000;
}

.modal-close:hover {
    background: #c0392b;
}
.modal-close:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    text-shadow: none;
}

.modal-loading {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: 10px;
    text-shadow: 1px 1px 0px #000;
}

.todo-list-box {
    padding: 10px 12px;
}

.hq-todo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 10px;
    line-height: 1.5;
    cursor: pointer;
}

.hq-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hq-checkbox:hover {
    border-color: #fff;
    transform: scale(1.1);
}

.hq-checkbox.checked {
    border-color: #fff;
}

.hq-todo-text {
    flex: 1;
}

.hq-todo-text.checked {
    text-decoration: line-through;
    color: #666;
}

/* Input field for editing - matches text exactly */
input.hq-todo-text.editing {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    line-height: 1.5;
    color: #eee;
    caret-color: #00ff00;
    caret-shape: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    animation: greenCaretBlink 0.6s step-end infinite;
}

@keyframes greenCaretBlink {
    0%, 50% {
        caret-color: #00ff00;
    }
    51%, 100% {
        caret-color: transparent;
    }
}

input.hq-todo-text.editing.checked {
    text-decoration: line-through;
    color: #666;
}

.hq-paragraph {
    padding: 8px 0;
    font-size: 10px;
    line-height: 1.6;
}

.hq-heading {
    padding: 12px 0 8px;
    color: #f39c12;
    text-shadow: 1px 1px 0px #000;
}

.hq-heading-1 { font-size: 14px; }
.hq-heading-2 { font-size: 12px; }
.hq-heading-3 { font-size: 11px; }

.hq-bullet {
    padding: 4px 0 4px 15px;
    font-size: 10px;
    position: relative;
}

.hq-bullet::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #f39c12;
}

.hq-divider {
    border: none;
    border-top: 2px solid #444;
    margin: 15px 0;
}

/* Modal Edit Mode */
.modal-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.modal-save-btn {
    background: linear-gradient(180deg, #f5b041, #f39c12);
    border-style: solid; border-width: 3px;
    border-color: #f9e076 #c07a08 #a06808 #e8b830;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 6px 10px;
    font-size: 8px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 2px 2px 0px #000;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-save-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    text-shadow: none;
}

.modal-save-btn:hover {
    background: linear-gradient(180deg, #f9c85a, #f5b041);
}

.modal-close.cancel-mode {
    background: #3a3a4a;
    border: 2px solid #555;
    width: auto;
    padding: 6px 10px;
    font-size: 8px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.modal-close.cancel-mode:hover {
    background: #4a4a5a;
    border-color: #666;
    color: #ddd;
}

.modal-empty {
    text-align: center;
    padding: 40px 20px;
}

.modal-empty-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.modal-empty-title {
    color: #f39c12;
    font-size: 11px;
    margin-bottom: 10px;
}

.modal-empty-text {
    color: #888;
    font-size: 9px;
    margin-bottom: 20px;
    line-height: 1.6;
    text-shadow: 1px 1px 0px #000;
}

.modal-create-btn {
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    border-style: solid;
    border-width: 3px;
    border-color: #5ddb96 #1e8a4d #18703f #45d484;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 12px 20px;
    font-size: 10px;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 3px 3px 0px #000;
    transition: transform 0.1s ease;
}

.modal-create-btn:hover {
    transform: translateY(-2px);
}

.modal-create-btn:active {
    transform: translateY(0);
    box-shadow: none;
    text-shadow: none;
}

/* Add Todo Input */
.add-todo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: none;
    margin-top: 10px;
    position: relative;
}

.add-todo-checkbox {
    opacity: 0.4;
    cursor: default;
}

.add-todo-input {
    flex: 1;
    color: #eee;
    padding: 4px 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    background: transparent;
    border: none;
    line-height: 1.5;
}

.add-todo-input:focus {
    outline: none;
}

.add-todo-input::placeholder {
    color: #777;
    font-size: 9px;
}

.add-todo-btn {
    background: linear-gradient(180deg, #3ddb80, #2ecc71);
    border-style: solid;
    border-width: 3px;
    border-color: #5ddb96 #1e8a4d #18703f #45d484;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 0;
    font-size: 12px;
    line-height: 1;
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 1px 1px 0px #000;
}

.add-todo-btn:hover {
    background: #27ae60;
}
.add-todo-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    text-shadow: none;
}

.add-todo-btn:disabled {
    background: #555;
    cursor: not-allowed;
}


/* Delete button — red beveled button matching green + style */

.hq-todo-delete-btn {
    flex-shrink: 0;
    background: linear-gradient(180deg, #e05a4a, #c0392b);
    border-style: solid;
    border-width: 3px;
    border-color: #e87a6a #8a2218 #701a10 #d4564a;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 0;
    font-size: 12px;
    line-height: 1;
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 1px 1px 0px #000;
}

.hq-todo-delete-btn:hover {
    background: linear-gradient(180deg, #e87a6a, #e05a4a);
}
.hq-todo-delete-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    text-shadow: none;
}

/* Click flash animation */
.hq-todo.flash {
    animation: clickFlash 0.3s ease;
}

@keyframes clickFlash {
    0% { background: transparent; }
    30% { background: rgba(255, 255, 255, 0.15); }
    100% { background: transparent; }
}

.hold-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #f39c12;
    width: 0%;
    transition: width 0.1s linear;
}

/* .task touch/select styles merged into main .task block */

/* Touch action fix for all interactive elements - removes 300ms mobile delay */
.task, .frequency-toggle, .multiverse-action, .hq-todo, .hq-checkbox,
.modal-close, .modal-save-btn, .add-todo-btn, button, select,
.stats-tv, .task-expand-arrow, .task-expand-overlay,
.dev-test-toggle, .toggle-switch, .toggle-row,
.ql-close, .ql-roll-top, .ql-roll-bottom, .ql-quest-line,
.ql-tray-action, .ql-unwind,
.quick-date-btn, .quest-card, .week-row, .empty-day-wrapper,
.calendar-widget, .settings-save-btn, .settings-select,
.nav-btn, .mode-btn, .completion-mode-btn, .scope-btn, .freq-btn,
.time-chip, .reminder-chip, .day-chip, .date-chip,
.dur-btn, .qc-btn, .qa-add, .qa-plan, .qa-hub-btn,
.quest-hub-btn, .block-type-card, .custom-emoji-preview-box,
.sync-error-dismiss, .um-date-toggle {
    touch-action: manipulation;
}

/* Sync portal animation — removed 2026-02-27, see examples/sync-portal-animation.html */

/* Multiverse Update Notification */
.multiverse-notification {
    position: fixed;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid #9b59b6;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    z-index: 998; /* notifications: toast=997, multiverse=998, sync-error=999 */
    transition: bottom 0.4s ease, border-color 0.3s ease;
    cursor: pointer;
    max-width: 90vw;
}

.multiverse-notification.active {
    bottom: 20px;
}

/* Orbit container - bigger for more space */
.multiverse-orbit-container {
    width: 70px;
    height: 44px;
    position: relative;
}

.multiverse-larry {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.multiverse-larry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Larry 1 - initial state: medium speed */
.multiverse-larry.larry-1 {
    animation: orbitWide1 1.5s linear infinite, hueShift 2s linear infinite;
    filter: hue-rotate(0deg) brightness(1.2);
}

/* Larry 2 - initial state */
.multiverse-larry.larry-2 {
    animation: orbitWide2 1.5s linear infinite, hueShift2 2s linear infinite;
    filter: hue-rotate(180deg) brightness(1.2);
}

/* Merged Larry - hidden by default, bigger */
.multiverse-larry-merged {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.8);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.multiverse-larry-merged img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

/* Wide orbit - notification state with vertical noise, MIRRORED */
@keyframes orbitWide1 {
    0% { top: 48%; left: 0%; transform: translate(0, -50%); }
    25% { top: 52%; left: 50%; transform: translate(-50%, -50%); }
    50% { top: 49%; left: 100%; transform: translate(-100%, -50%); }
    75% { top: 51%; left: 50%; transform: translate(-50%, -50%); }
    100% { top: 48%; left: 0%; transform: translate(0, -50%); }
}

@keyframes orbitWide2 {
    0% { top: 52%; left: 100%; transform: translate(-100%, -50%); }
    25% { top: 48%; left: 50%; transform: translate(-50%, -50%); }
    50% { top: 51%; left: 0%; transform: translate(0, -50%); }
    75% { top: 49%; left: 50%; transform: translate(-50%, -50%); }
    100% { top: 52%; left: 100%; transform: translate(-100%, -50%); }
}

@keyframes hueShift {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

@keyframes hueShift2 {
    0% { filter: hue-rotate(180deg) brightness(1.2); }
    100% { filter: hue-rotate(540deg) brightness(1.2); }
}

/* Syncing state - faster */
.multiverse-notification.syncing .multiverse-larry.larry-1 {
    animation: orbitWide1 0.5s linear infinite, hueShift 0.8s linear infinite;
}

.multiverse-notification.syncing .multiverse-larry.larry-2 {
    animation: orbitWide2 0.5s linear infinite, hueShift2 0.8s linear infinite;
}

/* Merging state - fast oscillation while getting closer, MIRRORED */
.multiverse-notification.merging .multiverse-larry.larry-1 {
    animation: orbitMergeLeft 1s linear forwards, hueShift 0.8s linear infinite;
}

.multiverse-notification.merging .multiverse-larry.larry-2 {
    animation: orbitMergeRight 1s linear forwards, hueShift2 0.8s linear infinite;
}

/* Both Larrys always same distance from center, crossing in middle */
@keyframes orbitMergeLeft {
    0% { left: 0%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    5% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    10% { left: 100%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    15% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    20% { left: 5%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    25% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    30% { left: 95%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    35% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    40% { left: 12%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    45% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    50% { left: 88%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    55% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    60% { left: 20%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    65% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.9; }
    70% { left: 80%; top: 50%; transform: translate(-100%, -50%); opacity: 0.9; }
    75% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.8; }
    80% { left: 30%; top: 50%; transform: translate(-15%, -50%); opacity: 0.6; }
    85% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
    90% { left: 70%; top: 50%; transform: translate(-85%, -50%); opacity: 0.3; }
    95% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.1; }
    100% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
}

/* Larry 2 - exact mirror of Larry 1 */
@keyframes orbitMergeRight {
    0% { left: 100%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    5% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    10% { left: 0%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    15% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    20% { left: 95%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    25% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    30% { left: 5%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    35% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    40% { left: 88%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    45% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    50% { left: 12%; top: 50%; transform: translate(0, -50%); opacity: 1; }
    55% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; }
    60% { left: 80%; top: 50%; transform: translate(-100%, -50%); opacity: 1; }
    65% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.9; }
    70% { left: 20%; top: 50%; transform: translate(0, -50%); opacity: 0.9; }
    75% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.8; }
    80% { left: 70%; top: 50%; transform: translate(-85%, -50%); opacity: 0.6; }
    85% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
    90% { left: 30%; top: 50%; transform: translate(-15%, -50%); opacity: 0.3; }
    95% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.1; }
    100% { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
}

/* Success state - merged Larry visible, keep green styling */
.multiverse-notification.success .multiverse-larry.larry-1,
.multiverse-notification.success .multiverse-larry.larry-2 {
    animation: none;
    opacity: 0;
}

.multiverse-notification.success .multiverse-larry-merged {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.multiverse-message {
    color: #88ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.multiverse-message strong {
    color: #ff88ff;
    text-shadow: 0 0 5px rgba(255, 136, 255, 0.5);
}

.multiverse-notification.success {
    border-color: #2ecc71;
}

.multiverse-notification.success .multiverse-message {
    color: #88ff88;
}

.multiverse-notification.success .multiverse-message strong {
    color: #2ecc71;
}

.multiverse-notification.error {
    border-color: #e74c3c;
}

.multiverse-notification.error .multiverse-message {
    color: #ff8888;
}

.multiverse-notification.error .multiverse-message strong {
    color: #e74c3c;
}

.multiverse-action {
    background: linear-gradient(180deg, #00cccc, #009999);
    border-style: solid;
    border-width: 2px;
    border-color: #33e5e5 #007a7a #006060 #00b3b3;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 6px 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    cursor: pointer;
    box-shadow: 2px 2px 0px #000, 0 0 10px rgba(0, 255, 255, 0.3);
}

.multiverse-action:hover {
    background: linear-gradient(180deg, #00ffff, #00cccc);
}
.multiverse-action:active {
    transform: translate(1px, 1px);
    box-shadow: none;
    text-shadow: none;
}

/* ========================================
   CALENDAR SETTINGS MODAL
   ======================================== */
.calendar-settings-modal {
    max-width: 380px;
}

.calendar-settings-modal .modal-body {
    padding: 15px;
}

.settings-group {
    margin-bottom: 18px;
}

.settings-label {
    display: block;
    color: #f39c12;
    font-size: 10px;
    margin-bottom: 8px;
}

.settings-desc {
    color: #888;
    font-size: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.settings-select {
    width: 100%;
    background: #2a2a3e;
    border: 2px solid #444;
    color: #fff;
    padding: 10px 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.settings-select:focus {
    outline: none;
    border-color: #f39c12;
}

.settings-select option {
    background: #2a2a3e;
    color: #fff;
    padding: 10px;
}

.settings-info {
    background: #1a1a2e;
    border: 2px solid #333;
    padding: 12px;
    margin: 15px 0;
}

.current-time-display {
    color: #888;
    font-size: 8px;
    margin: 4px 0;
}

.current-time-display span {
    color: #2ecc71;
}

.settings-save-btn {
    width: 100%;
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    border: 2px solid #1e8449;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    padding: 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0px #000;
    transition: all 0.1s ease;
}

.settings-save-btn:hover {
    background: linear-gradient(180deg, #3ddd82, #2ecc71);
    transform: translateY(-2px);
}

.settings-save-btn:active {
    transform: translateY(0);
    box-shadow: none;
    text-shadow: none;
}

/* Calendar widget hover/active states */
/* calendar-widget interaction styles merged into main .calendar-widget block */

.calendar-widget:hover {
    transform: scale(1.05);
}

.calendar-widget:active {
    transform: scale(0.98);
}

.calendar-widget.holding {
    animation: calendar-pulse 0.3s ease infinite;
}

@keyframes calendar-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(243, 156, 18, 0); }
    50% { transform: scale(1.08); box-shadow: 0 0 15px rgba(243, 156, 18, 0.5); }
}

/* ============================================
   SYNC ERROR TOAST
   ============================================ */
.sync-error-toast {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 2px solid #e74c3c;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999; /* notifications: toast=997, multiverse=998, sync-error=999 */
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #e74c3c;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4);
    transition: top 0.4s ease;
    max-width: 90vw;
}

.sync-error-toast.active {
    top: 16px;
}

.sync-error-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.sync-error-message {
    flex: 1;
    line-height: 1.4;
}

.sync-error-dismiss {
    background: none;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.sync-error-dismiss:active {
    background: #e74c3c;
    color: #1a1a2e;
}


/* ============================================
   EDIT MODAL STYLES (Branch & Task Editors)
   ============================================ */
.edit-modal {
    border-color: #9b59b6;
    box-shadow:
        inset 4px 4px 0px rgba(155, 89, 182, 0.1),
        inset -4px -4px 0px rgba(0,0,0,0.3),
        0 0 30px rgba(155, 89, 182, 0.3);
}

.edit-section { margin-bottom: 18px; }

.edit-section-label {
    font-size: 8px; color: #888;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}

.edit-preview {
    background: #3a3a4a;
    padding: 10px;
    border-style: solid;
    border-width: 4px;
    border-color: #6a6a7a #353540 #252530 #454555;
    margin-bottom: 18px;
}
.edit-preview .branch-header { margin-bottom: 0; }

.edit-name-input {
    width: 100%; background: #252538;
    border: 2px solid #7d3c98; color: #e0e0e0;
    padding: 10px; font-family: 'Press Start 2P', cursive; font-size: 11px;
    caret-color: #bb86fc;
}
.edit-name-input:focus { outline: none; border-color: #bb86fc; box-shadow: 0 0 10px rgba(187, 134, 252, 0.3); }
.edit-name-input::placeholder { color: #555; }

/* Emoji Picker */
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-option {
    width: 100%; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; background: #252538;
    border-style: solid;
    border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.1s; touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    filter:
        drop-shadow(1px 0 0 #3a3a4a)
        drop-shadow(-1px 0 0 #3a3a4a)
        drop-shadow(0 1px 0 #3a3a4a)
        drop-shadow(0 -1px 0 #3a3a4a);
}
.emoji-option:hover, .emoji-option:active {
    border-color: #f39c12 #c07a08 #a06808 #d08a10;
    background: #3a3a4a;
    transform: scale(1.1);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 6px rgba(243, 156, 18, 0.3);
}
.emoji-option.selected {
    border-color: #f39c12 #c07a08 #a06808 #d08a10;
    background: #4a3a20;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px rgba(243, 156, 18, 0.4);
}
.emoji-page-btn, .emoji-custom-btn {
    background: #2a2040;
    border-color: #7a5aaa #4a3070 #3a2060 #5a4080;
    filter: none;
}
.emoji-page-btn {
    font-size: 12px;
    color: #b090e0;
}
.emoji-custom-btn {
    position: relative;
}
.custom-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #b090e0;
}
.emoji-page-btn.disabled {
    opacity: 0.25;
    cursor: default;
}
.emoji-page-btn.disabled:hover,
.emoji-page-btn.disabled:active {
    transform: none;
    border-color: #7a5aaa #4a3070 #3a2060 #5a4080;
    background: #2a2040;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}

/* Custom Emoji Modal */
.custom-emoji-modal {
    max-width: 280px;
    top: calc(15% + 20px);
    transform: translate(-50%, 0);
}
.custom-emoji-modal .modal-header {
    justify-content: flex-end;
}
.custom-emoji-modal .modal-header-actions {
    margin-left: auto;
}
.custom-emoji-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 20px;
}
.custom-emoji-label {
    font-size: 12px;
    color: #f39c12;
    text-shadow: 2px 2px 0px #000;
    text-align: center;
}
.custom-emoji-field {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.custom-emoji-preview-box {
    width: 56px;
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 3px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    cursor: pointer;
}
.custom-emoji-preview {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    filter:
        drop-shadow(1px 0 0 #3a3a4a)
        drop-shadow(-1px 0 0 #3a3a4a)
        drop-shadow(0 1px 0 #3a3a4a)
        drop-shadow(0 -1px 0 #3a3a4a);
}
.custom-emoji-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #b090e0;
    animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Color Picker */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.color-option {
    width: 100%; aspect-ratio: 1;
    border-style: solid;
    border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.1s; position: relative; touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.color-option:hover, .color-option:active {
    transform: scale(1.1);
    border-color: #f39c12 #c07a08 #a06808 #d08a10;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 6px rgba(243, 156, 18, 0.3);
}
.color-option.selected {
    border-color: #f39c12 #c07a08 #a06808 #d08a10;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px var(--swatch-color);
}
.color-option.selected::after {
    content: '\2713'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    font-family: 'Press Start 2P', cursive; font-weight: bold;
}
.color-option .color-in-use {
    position: absolute; bottom: -2px; right: -2px;
    width: 10px; height: 10px;
    background: #1a1a2e;
    border: 2px solid #555;
    display: flex; align-items: center; justify-content: center;
    font-size: 6px;
}

/* Custom Color Button */
.custom-color-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #b090e0;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    background: #2a2040;
    border-style: solid;
    border-width: 3px;
    border-color: #7a5aaa #4a3070 #3a2060 #5a4080;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: all 0.1s;
}
.custom-color-btn:active {
    transform: scale(0.97);
}
.custom-color-btn.active {
    border-color: #f39c12 #c07a08 #a06808 #d08a10;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px rgba(155, 89, 182, 0.4);
}

.um-branch-label {
    font-family: 'Press Start 2P', monospace; font-size: 8px;
    color: #8a7a50; text-align: center; margin-bottom: 4px;
}
.branch-delete-section { margin-top: 12px; border-top: 2px solid #3a3a4a; padding-top: 12px; }
.branch-delete-btn {
    width: 100%; padding: 8px; font-family: 'Press Start 2P', monospace; font-size: 9px;
    background: #3a2020; color: #cc4444; border: 3px solid #662222;
    border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
}
.branch-delete-btn:hover { background: #4a2525; border-color: #883333; }
.branch-delete-btn:active { transform: scale(0.97); }
.branch-delete-btn.confirm { background: #5a1515; color: #ff6666; border-color: #aa3333; box-shadow: 0 0 8px rgba(204,68,68,0.4); }

/* Custom Color Picker Modal */
.custom-color-modal {
    max-width: 240px;
    top: calc(15% + 20px);
    transform: translate(-50%, 0);
}
.custom-color-modal .modal-header {
    justify-content: flex-end;
}
.custom-color-modal .modal-header-actions {
    margin-left: auto;
}
.custom-color-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 20px;
}
.custom-color-label {
    font-size: 12px;
    color: #f39c12;
    text-shadow: 2px 2px 0px #000;
    text-align: center;
}
.custom-color-input {
    width: 100%;
    height: 40px;
    border: 3px solid #7a5aaa;
    background: #1a1a2e;
    cursor: pointer;
    padding: 2px;
}
.custom-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-input::-webkit-color-swatch { border: none; }
.custom-color-preview-box {
    width: 48px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-width: 3px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}


/* ============================================
   TOAST NOTIFICATION
   ============================================ */
.toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #2d5a3d; border: 3px solid #2ecc71;
    padding: 10px 20px; font-size: 9px; color: #2ecc71;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
    z-index: 997; pointer-events: none; /* notifications: toast=997, multiverse=998, sync-error=999 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    opacity: 0;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
}
.toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============================================
   QUEST SYSTEM STYLES
   ============================================ */

/* Quest item in task list */
/* Quest items — same grey as tasks, brown/copper bevel */
.task.quest-item .task-type {
    border-color: #8a7a50 #4a3a18 #2a2008 #6a5a38;
    border-right-width: 2px;
}
.task.quest-item .task-content {
    border-color: #8a7a50 #4a3a18 #2a2008 #6a5a38;
    border-left-width: 2px;
}

/* Quest due date label — bottom-right corner, doesn't affect name centering */
.quest-due {
    position: absolute;
    bottom: 2px; right: 6px;
    font-family: 'Press Start 2P', cursive;
    font-size: 7px; color: #8a7a50;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}
.quest-due.overdue { color: #e74c3c; }

/* High priority quest — rhythmic branch-color glow */
.task.high-priority:not(.completed) {
    animation: questPrioGlow 1.4s ease-in-out infinite;
}
@keyframes questPrioGlow {
    0%, 100% { box-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
    50% { box-shadow: 2px 2px 4px rgba(0,0,0,0.5), 0 0 4px 1px var(--branch-color, #3498db); }
}

/* Missed quest action buttons */
.quest-missed-actions {
    display: flex; gap: 4px; margin-top: 4px; justify-content: center;
}
.quest-missed-actions button {
    font-family: 'Press Start 2P', cursive; font-size: 10px;
    padding: 4px 8px; cursor: pointer; border-style: solid; border-width: 2px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.quest-missed-actions button:active {
    transform: translate(1px,1px); box-shadow: none; text-shadow: none;
}
.quest-missed-btn-reschedule {
    background: #1a3a5a; border-color: #3498db #1a5a8a #0a3a6a #2480b0; color: #3498db;
}
.quest-missed-btn-archive {
    background: #5a1a10; border-color: #8a3020 #4a1008 #2a0804 #6a2018; color: #c88;
}

/* Quest inline counter — removed, now part of .stats-tv scoreboard */

/* "Add Quest" button */
.quest-hub-btn {
    position: relative;
    background: #3a3a4a;
    border-style: solid; border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    height: 35px; padding: 0 14px;
    font-family: 'Press Start 2P', cursive; color: #ccc; font-size: 9px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; white-space: nowrap; flex-shrink: 0;
}
.quest-hub-btn:active {
    border-color: #252530 #454555 #6a6a7a #353540;
    box-shadow: none; text-shadow: none; transform: translate(2px, 2px);
}
#addQuestBtn {
    background: linear-gradient(180deg, #a866c0, #9b59b6, #8e4da8);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px rgba(155,89,182,0.3);
    color: #f0e0ff;
}
#addQuestBtn:active {
    border-color: #5a2870 #b070d0 #c080e0 #6a3080;
    box-shadow: none;
}
#addBlockBtn {
    background: linear-gradient(180deg, #e8a020, #c07a08, #a06808);
    border-color: #f5c040 #8a5a04 #704a02 #d09010;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 6px rgba(243,156,18,0.25);
    color: #fff0d0;
}
#addBlockBtn:active {
    border-color: #704a02 #d09010 #f5c040 #8a5a04;
    box-shadow: none;
}
#addBranchBtn {
    background: linear-gradient(180deg, #8b6914, #6b4a0a, #5a3d08);
    border-color: #a8842a #4a3006 #3a2404 #8a6a1a;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 6px rgba(139,105,20,0.25);
    color: #e8d8a0;
}
#addBranchBtn:active {
    border-color: #3a2404 #8a6a1a #a8842a #4a3006;
    box-shadow: none;
}
#addBranchBtn:disabled {
    background: linear-gradient(180deg, #5a4510, #4a3808, #3c2e06);
    border-color: #6a5518 #3a2804 #2c2004 #584812;
    color: #8a7a50;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    cursor: not-allowed;
}

/* ============================================
   ADD BRANCH WIZARD
   ============================================ */
.abw-modal { max-width: 420px; }
.abw-modal .modal-header { display: flex; align-items: center; gap: 8px; }
.abw-back-btn {
    font-size: 14px; background: none; border: none; color: #e8d8a0;
    cursor: pointer; padding: 2px 6px; font-family: 'Press Start 2P', cursive;
}

/* Progress dots */
.abw-progress {
    display: flex; justify-content: center; gap: 8px;
    padding: 6px 0 2px;
}
.abw-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #3a2a10; border: 2px solid #5a4520;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.abw-dot.active { background: #f39c12; border-color: #f5c040; box-shadow: 0 0 6px rgba(243,156,18,0.5); }
.abw-dot.done { background: #8a6a1a; border-color: #a8842a; }

/* Branch reel */
.abw-reel { margin: 8px 0; }
.abw-reel .reel-item.dimmed { opacity: 0.4; }
.abw-active-tag { font-size: 7px; color: #8a7a50; }
.abw-preset-desc {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    color: #b0a080; text-align: center; padding: 4px 8px; min-height: 20px;
}
.abw-custom-btn {
    display: block; width: 100%; margin: 6px 0;
    font-family: 'Press Start 2P', cursive; font-size: 9px;
    padding: 8px; border: 2px solid #5a4520;
    background: linear-gradient(180deg, #3a2a10, #2a1a08);
    color: #e8d8a0; cursor: pointer; text-align: center;
}
.abw-custom-btn:active { border-color: #f39c12; }

/* Task toggle list */
.abw-task-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.abw-task-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border: 2px solid #3a2a10;
    background: #1a1208; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.abw-task-toggle.on { border-color: #5a4520; background: #2a1a08; }
.abw-task-toggle:active { background: #3a2a10; }
.abw-task-check {
    width: 18px; height: 18px; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #5a4520; background: #0a0804; color: #2ecc71; flex-shrink: 0;
}
.abw-task-toggle.on .abw-task-check { background: #1a3018; border-color: #2ecc71; }
.abw-task-info { flex: 1; min-width: 0; }
.abw-task-name {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    color: #e8d8a0; display: block;
}
.abw-task-desc {
    font-family: 'Press Start 2P', cursive; font-size: 7px;
    color: #8a7a50; display: block; margin-top: 2px;
}
.abw-task-remove {
    background: none; border: none; color: #e74c3c;
    font-size: 12px; cursor: pointer; padding: 0 4px;
    font-family: 'Press Start 2P', cursive;
}

/* Custom task input */
.abw-add-custom { display: flex; gap: 4px; margin-top: 6px; }
.abw-custom-input {
    flex: 1; font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 6px 8px; border: 2px solid #5a4520;
    background: #1a1208; color: #e8d8a0; outline: none;
}
.abw-custom-input::placeholder { color: #5a4520; }
.abw-custom-input:focus { border-color: #f39c12; }
.abw-add-btn {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 6px 10px; border: 2px solid #5a4520;
    background: linear-gradient(180deg, #3a2a10, #2a1a08);
    color: #e8d8a0; cursor: pointer;
}
.abw-add-btn:active { border-color: #f39c12; }

/* Confirm step */
.abw-confirm { padding: 8px 0; }
.abw-confirm-header {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; margin-bottom: 12px;
}
.abw-confirm-name {
    font-family: 'Press Start 2P', cursive; font-size: 12px; color: #e8d8a0;
}
.abw-confirm-counts { display: flex; flex-direction: column; gap: 4px; }
.abw-count-row {
    display: flex; justify-content: space-between; padding: 4px 16px;
    font-family: 'Press Start 2P', cursive; font-size: 9px; color: #b0a080;
}
.abw-count-row.total { border-top: 2px solid #5a4520; margin-top: 4px; padding-top: 8px; color: #e8d8a0; }
.abw-count-val { color: #f39c12; }

/* Unsorted badge on quests button */
.unsorted-ind {
    position: absolute; top: -8px; right: -8px;
    background: #e74c3c; border: 2px solid #ff6b6b;
    font-family: 'Press Start 2P', cursive; font-size: 8px; color: white;
    min-width: 18px; height: 18px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    animation: questBadgePulse 2s ease-in-out infinite;
}
.unsorted-ind.hide { display: none; }
@keyframes questBadgePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(231,76,60,0.3); }
    50% { box-shadow: 0 0 12px rgba(231,76,60,0.6); }
}

/* Unsorted line below orbs */
.unsorted-line {
    font-size: 7px; color: #555; display: flex; align-items: center;
    gap: 4px; margin-top: 4px;
}
.unsorted-line .n { color: #e74c3c; }

/* Flying quest scroll animation */
.flying-quest-scroll {
    position: fixed; z-index: 1102; font-size: 20px;
    pointer-events: none; filter: drop-shadow(0 0 6px rgba(243,156,18,0.5));
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Quest counter bump on landing */
.quest-counter-bump { animation: questCounterBump 0.3s ease; }
@keyframes questCounterBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ── Quest completion animation ── */

/* Quest in completing state - slight glow pulse */
.task.quest-completing {
    position: relative;
    box-shadow: 0 0 10px var(--branch-glow, rgba(52,152,219,0.4)),
                0 0 20px var(--branch-glow-soft, rgba(52,152,219,0.2));
}

/* Text swap: fade out old text */
.task-name-text.quest-text-swap {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Text reveal: fade in new text */
.task-name-text.quest-text-reveal {
    animation: questTextReveal 0.3s ease forwards;
}
@keyframes questTextReveal {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Undo button - text aligned to the right of the task block */
.quest-undo-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #888;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.15s ease;
    z-index: 2;
    text-transform: lowercase;
}
.quest-undo-btn.visible {
    opacity: 1;
}
.quest-undo-btn:hover {
    color: #fff;
}

/* ============================================
   QUEST MAKER MODAL STYLES
   ============================================ */

/* Adventure theme modal */
.modal-content.adventure {
    border-color: #8a7a50;
    box-shadow: inset 4px 4px 0 rgba(243,156,18,0.08),
                inset -4px -4px 0 rgba(0,0,0,0.3),
                0 0 30px rgba(243,156,18,0.2);
}
.modal-content.adventure .modal-header {
    background: #2a2518; border-bottom-color: #5a4a28;
}
.modal-content.adventure .modal-title { color: #f9e076; }

/* Quick Add */
.qa-label {
    font-size: 10px; color: #f9e076; margin-bottom: 12px;
    text-shadow: 1px 1px 0 #000; text-align: center;
}
.qa-input {
    width: 100%;
    color: #eee; font-family: 'Press Start 2P', cursive;
    font-size: 11px; padding: 14px; outline: none;
    caret-color: #f39c12; margin-bottom: 12px;
}
.qa-input::placeholder { color: #3a3a4a; font-size: 8px; }

.qa-actions { display: flex; gap: 8px; }

/* Quest hub 3-button layout */
.qa-hub-actions { display: flex; gap: 6px; }
.qa-hub-btn {
    flex: 1; border-style: solid; border-width: 3px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    font-family: 'Press Start 2P', cursive; font-size: 7px;
    padding: 10px 6px; cursor: pointer; text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.qa-hub-btn:active {
    transform: translate(2px,2px); box-shadow: none; text-shadow: none;
}
.qa-hub-log {
    background: linear-gradient(180deg, #5a4a20, #4a3a18);
    border-color: #8a7a50 #4a3a18 #2a2008 #6a5a38; color: #f9e076;
}
.qa-hub-plan {
    background: linear-gradient(180deg, #9b59b6, #7b3996);
    border-color: #bb79d6 #6a2986 #4a1966 #8b49a6; color: #eee;
}
.qa-hub-add {
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    border-color: #5efc99 #1a9c4d #127a3d #3abc6d; color: #1a3a1a;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}
.qa-add {
    flex: 1; background: linear-gradient(180deg, #5a4a20, #4a3a18);
    border-style: solid; border-width: 3px;
    border-color: #8a7a50 #4a3a18 #2a2008 #6a5a38;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    color: #f9e076; font-family: 'Press Start 2P', cursive;
    font-size: 9px; padding: 12px; cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.qa-add:active {
    border-color: #2a2008 #6a5a38 #8a7a50 #4a3a18;
    transform: translate(2px,2px); box-shadow: none; text-shadow: none;
}
.qa-plan {
    background: linear-gradient(180deg, #9b59b6, #7b3996);
    border-style: solid; border-width: 3px;
    border-color: #bb79d6 #6a2986 #4a1966 #8b49a6;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    color: #eee; font-family: 'Press Start 2P', cursive;
    font-size: 8px; padding: 12px; cursor: pointer;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.qa-plan:active {
    border-color: #4a1966 #8b49a6 #bb79d6 #6a2986;
    transform: translate(2px,2px); box-shadow: none; text-shadow: none;
}
.qa-count { font-size: 7px; color: #555; margin-top: 10px; text-align: center; text-shadow: 1px 1px 0px #000; }
.qa-count span { color: #e74c3c; }

/* Quest Log — Full-Screen Overlay */
.quest-log-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    background: rgba(10, 10, 20, 0.92);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.quest-log-overlay.active { display: block; }

/* Wooden table container */
.ql-table {
    position: relative;
    width: 90%;
    max-width: 700px;
    min-height: 60vh;
    margin: 20px auto;
    padding: 30px 16px 20px;
    background:
        repeating-linear-gradient(90deg, transparent 0px, transparent 140px, rgba(0,0,0,0.15) 140px, rgba(0,0,0,0.15) 143px),
        repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px),
        radial-gradient(ellipse 12px 18px at 80px 120px, rgba(80,50,20,0.5) 0%, transparent 100%),
        radial-gradient(ellipse 8px 12px at 300px 200px, rgba(80,50,20,0.4) 0%, transparent 100%),
        linear-gradient(180deg, #4a2e14 0%, #5a381c 15%, #694222 30%, #5a381c 50%, #4a2e14 70%, #5a381c 85%, #694222 100%);
    border: 5px solid #3a2210;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4), 0 0 20px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
    border-radius: 4px;
    text-align: left;
}
/* Corner nails */
.ql-table::before, .ql-table::after {
    content: ''; position: absolute; width: 10px; height: 10px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%); border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5); z-index: 10;
}
.ql-table::before { top: 6px; left: 6px; }
.ql-table::after { top: 6px; right: 6px; }
.ql-nails-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; pointer-events: none; }
.ql-nails-bottom::before, .ql-nails-bottom::after {
    content: ''; position: absolute; width: 10px; height: 10px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%); border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
}
.ql-nails-bottom::before { bottom: 6px; left: 6px; }
.ql-nails-bottom::after { bottom: 6px; right: 6px; }

/* Close button */
.ql-close {
    position: absolute; top: 18px; right: 10px; z-index: 20;
    font-family: 'Press Start 2P', cursive; font-size: 20px; color: #c4a06a;
    background: none; border: none; cursor: pointer;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    transition: color 0.15s;
}
.ql-close:hover { color: #f4d03f; }

/* Title ribbon */
.ql-ribbon { display: flex; align-items: stretch; justify-content: center; margin-bottom: 52px; }
.ql-ribbon-side {
    position: relative; z-index: 0; width: 24px; margin-top: 5px; margin-bottom: 5px;
    background: linear-gradient(180deg, #7a1515, #5a0d0d); border: 2px solid #4a0a0a;
}
.ql-ribbon-left { margin-right: -2px; clip-path: polygon(0 50%, 30% 0, 100% 0, 100% 100%, 30% 100%); }
.ql-ribbon-right { margin-left: -2px; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.ql-ribbon-center {
    position: relative; z-index: 1; padding: 8px 24px;
    background: linear-gradient(180deg, #8b1a1a 0%, #6b1010 50%, #8b1a1a 100%);
    border: 3px solid #4a0a0a; box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.ql-ribbon-center span {
    font-size: 14px; color: #f4d03f;
    text-shadow: 2px 2px 0 #4a0a0a, 0 0 10px rgba(244,208,63,0.3);
    letter-spacing: 2px;
}

.ql-scrolls { display: flex; flex-direction: column; gap: 12px; padding: 0 10px; }

/* Individual scroll */
.ql-scroll { position: relative; box-shadow: 3px 4px 6px rgba(0,0,0,0.5); border-radius: 4px; }

/* Top/bottom rolls */
.ql-roll-top, .ql-roll-bottom { height: 35px; position: relative; z-index: 2; }
.ql-roll-top {
    background: linear-gradient(180deg,
        #c8b48a 0%, #e0d0a8 8%, #ecdcb8 18%, #d8c8a0 35%,
        #c8b48a 50%, #b8a478 65%, #8a7a58 78%, #a89468 90%, #b8a478 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0);
}
.ql-roll-bottom {
    background: linear-gradient(180deg,
        #c8b48a 0%, #e0d0a8 8%, #ecdcb8 18%, #d8c8a0 35%,
        #c8b48a 50%, #b8a478 65%, #8a7a58 78%, #a89468 90%, #b8a478 100%);
}

/* Branch header on top roll */
.ql-scroll-header {
    position: absolute; top: 0; left: 10px; right: 10px; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 3;
}
.ql-scroll-emoji { font-size: 14px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); }
.ql-scroll-name { font-size: 10px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.ql-roll-top { cursor: pointer; }
.ql-roll-bottom { cursor: pointer; margin-top: -35px; z-index: 1; }

/* Parchment */
.ql-parchment {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(139,105,20,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139,105,20,0.05) 0%, transparent 50%),
        linear-gradient(170deg, #f5e6c8 0%, #edd9b4 30%, #e8d0a0 60%, #f0dbb8 100%);
    border-left: 1px solid #c4a06a; border-right: 1px solid #c4a06a;
    margin: 0 4px; overflow: hidden;
    box-shadow: inset 2px 0 4px rgba(0,0,0,0.08), inset -2px 0 4px rgba(0,0,0,0.08);
}

/* Quest lines — padding here (not on parchment) so height:0 fully collapses */
.ql-quest-lines {
    padding: 8px 10px 36px;
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c4a06a #e8d0a0;
}
.ql-quest-lines::-webkit-scrollbar { width: 4px; }
.ql-quest-lines::-webkit-scrollbar-track { background: #e8d0a0; }
.ql-quest-lines::-webkit-scrollbar-thumb { background: #c4a06a; border-radius: 2px; }

/* Quest entry */
.ql-quest { overflow: hidden; }
.ql-quest.removing { pointer-events: none; }

/* Summary line at bottom of quest list */
.ql-summary {
    text-align: center; font-size: 9px; color: #8a7050;
    padding: 8px 4px 2px; margin-top: 4px;
    border-top: 1px solid rgba(139,105,20,0.15);
}

/* Empty branch message */
.ql-empty-msg {
    text-align: center; font-size: 9px; color: #a08a60;
    padding: 10px 4px; font-style: italic;
}

.ql-quest-line {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px; cursor: pointer;
    border-bottom: 1px solid rgba(139,105,20,0.1);
    transition: background 0.15s;
}
.ql-quest-line:hover { background: rgba(139,105,20,0.06); }
.ql-quest.open .ql-quest-line { background: rgba(139,105,20,0.08); }

/* Outlined checkbox */
.ql-check {
    width: 18px; height: 18px; min-width: 18px;
    background: transparent; border: 2px solid #5a4428;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}

.ql-quest-name {
    font-size: 10px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Strikethrough */
.ql-quest-name-wrap { flex: 1; position: relative; min-width: 0; }
.ql-quest-name-wrap::after {
    content: ''; position: absolute; left: 0; right: 30%; top: 50%;
    height: 1px; background: linear-gradient(90deg, var(--ink), transparent); opacity: 0.2;
}

.ql-quest-date { font-size: 10px; color: #8a7050; flex-shrink: 0; margin-left: auto; }
.ql-quest-arrow { display: none; }

/* Action tray */
.ql-tray {
    display: flex; gap: 16px; padding: 0 8px 0 25px;
    max-height: 0; overflow: hidden;
    transition: max-height var(--expand-dur, 0.25s) ease-in-out, padding var(--expand-dur, 0.25s) ease-in-out;
}
.ql-quest.open .ql-tray { max-height: 36px; padding: 6px 8px 8px 25px; }

.ql-tray-action {
    font-family: 'Press Start 2P', cursive; font-size: 10px;
    padding: 0; cursor: pointer; border: none; background: none;
    line-height: 1.3; transition: color 0.15s; position: relative;
}
.ql-tray-action::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: currentColor; opacity: 0; transition: opacity 0.15s;
}
.ql-tray-action:hover::after { opacity: 0.5; }
.ql-tray-action:active { transform: scale(0.95); }
.ql-tray-action.ql-dup { color: #3a6a3a; }
.ql-tray-action.ql-dup:hover { color: #2a8a2a; }
.ql-tray-action.ql-del { color: #8a3a3a; }
.ql-tray-action.ql-del:hover { color: #aa2a2a; }

/* Unwind arrow — inside bottom roll, hidden until unrolled */
.ql-unwind {
    position: absolute; top: 0; left: 10px; right: 10px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Press Start 2P', cursive; font-size: 8px; color: #7a6040;
    background: none; border: none; cursor: pointer; z-index: 3;
    opacity: 0; pointer-events: none;
}
.ql-unwind:hover { color: #3a2a10; }

/* Undo toast overlay inside quest entry */
.ql-undo-msg {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #5a4020; padding: 5px 4px;
    border-bottom: 1px solid rgba(139,105,20,0.1);
    opacity: 1; transition: opacity 0.3s ease;
}
.ql-undo-msg.fading { opacity: 0; }

/* Quest log — bigger screens get wider board + more scroll margin */
@media (min-width: 700px) {
    .ql-scrolls { padding: 0 50px; }
}
@media (min-width: 900px) {
    .ql-table { max-width: 850px; }
}
@media (min-width: 1200px) {
    .ql-table { max-width: 1000px; }
}

/* Task expand-in animation (quest reappearing on main page) */
@keyframes questExpandIn {
    0% { height: 0; min-height: 0; overflow: hidden; opacity: 0; box-shadow: 0 0 0 transparent; }
    60% { opacity: 1; }
    100% { height: var(--target-h); min-height: var(--target-h); overflow: visible; opacity: 1; }
}
.task.quest-expand-in {
    animation-name: questExpandIn;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* Adventure Plan */
.ap-progress { height: 6px; background: #1a1a2e; border: 2px solid #3a3020; margin-bottom: 10px; }
.ap-fill { height: 100%; background: #f39c12; transition: width 0.4s ease; }
.ap-count { font-size: 8px; color: #5a4a28; text-align: center; margin-bottom: 14px; text-shadow: 1px 1px 0px rgba(0,0,0,0.5); }

/* Quest card in adventure plan */
.qc-name {
    font-size: 14px; color: #f9e076; text-shadow: 2px 2px 0 #000;
    text-align: center; line-height: 1.5; margin-bottom: 4px;
}
.qc-name-input {
    font-family: 'Press Start 2P', monospace; font-size: 12px; color: #f9e076;
    text-shadow: 2px 2px 0 #000; text-align: center; line-height: 1.5;
    width: 100%; margin-bottom: 4px; padding: 6px 8px;
    background: rgba(0,0,0,0.25); border: 2px solid rgba(249,224,118,0.3);
    border-radius: 2px; outline: none;
}
.qc-name-input:focus { border-color: rgba(249,224,118,0.6); background: rgba(0,0,0,0.35); }
.qc-meta { font-size: 7px; color: #4a4028; text-align: center; margin-bottom: 16px; text-shadow: 1px 1px 0px rgba(0,0,0,0.5); }
.qc-wrap { transition: transform 0.35s ease, opacity 0.35s ease; }
.qc-wrap.out-r { transform: translateX(120%) rotate(8deg); opacity: 0; }
.qc-wrap.out-l { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.qc-wrap.out-d { transform: translateY(60%); opacity: 0; }

/* Section labels in adventure plan */
.sec-label {
    font-size: 7px; color: #6a5a38; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 6px;
}

.quick-date-row {
    display: flex; gap: 3px; margin-bottom: 6px;
}
.quick-date-btn {
    flex: 1; font-family: 'Press Start 2P', cursive; font-size: 7px; padding: 6px 4px;
    background: #2a2a3a; color: #6a5a38;
    border: 3px solid #3a3a4a; outline: none; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    transition: all 0.15s ease; text-align: center;
}
.quick-date-btn:hover { color: #f39c12; border-color: #555565; }
.quick-date-btn:active { transform: translate(1px, 1px); }
.quick-date-btn.qd-active {
    color: #f39c12; background: #32303e;
    border-color: #f39c12;
    text-shadow: 0 0 4px rgba(243,156,18,0.4);
    box-shadow: 0 0 6px rgba(243,156,18,0.15);
}

/* Compact recessed reel */
.reel-compact {
    position: relative; flex: 1; height: 54px; overflow: hidden;
    touch-action: none; user-select: none; cursor: grab;
}
.abw-reel.reel-compact { height: 60px; max-width: 200px; margin: 8px auto; }
.abw-reel .reel-item { justify-content: flex-start; padding-left: 16px; }

/* Branch reel — unified style matching date reel */
.branch-reel-unified {
    position: relative; width: 100%; height: 62px; overflow: hidden;
    touch-action: none; user-select: none; cursor: grab;
}
.branch-reel-unified:active { cursor: grabbing; }
.branch-reel-unified::before, .branch-reel-unified::after {
    content: ''; position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none;
}
.branch-reel-unified::before { top: 0; height: 16px; background: linear-gradient(180deg, rgba(10,10,15,1) 0%, transparent 100%); }
.branch-reel-unified::after { bottom: 0; height: 16px; background: linear-gradient(0deg, rgba(10,10,15,1) 0%, transparent 100%); }
.branch-reel-unified .reel-label {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 68px; text-align: center;
    font-size: 9px; font-weight: bold; color: #f9e076; letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(243,156,18,0.3);
    z-index: 3; pointer-events: none; white-space: nowrap;
}
.branch-reel-unified .reel-pointer {
    position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
    font-size: 8px; color: #f9e076; text-shadow: 0 0 8px rgba(243,156,18,0.3);
    z-index: 3; pointer-events: none;
}
.branch-reel-unified .reel-track { position: absolute; width: 100%; left: 0; margin-top: -3px; will-change: transform; }
.branch-reel-unified .reel-item { justify-content: flex-start; padding-left: 114px; }
.reel-compact:active { cursor: grabbing; }
.reel-compact::before, .reel-compact::after {
    content: ''; position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none;
}
.reel-compact::before { top: 0; height: 20px; background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, transparent 100%); }
.reel-compact::after { bottom: 0; height: 20px; background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 100%); }

.reel-track { position: absolute; width: 100%; left: 0; will-change: transform; }
.reel-item {
    height: 22px; display: flex; align-items: center; justify-content: center;
    gap: 8px; font-size: 9px; color: #3a3020;
    transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.reel-item.active {
    color: #f9e076; text-shadow: 0 0 10px rgba(243,156,18,0.4); transform: scale(1.08);
}
.reel-item .ri-emoji { font-size: 14px; }
.reel-item .ri-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 4px var(--dc, rgba(255,255,255,0.1));
}

/* Date reels — unified single-window layout */
.date-reel-unified {
    display: flex; align-items: stretch; height: 62px;
}
.date-reel-unified .reel-divider {
    width: 2px; flex-shrink: 0; z-index: 3;
    background: linear-gradient(180deg, transparent 8%, #404050 20%, #555565 50%, #404050 80%, transparent 92%);
}
.date-reel-unified .reel-col {
    position: relative; overflow: hidden; touch-action: none;
    user-select: none; cursor: grab; flex-shrink: 0;
}
.date-reel-unified .reel-col:active { cursor: grabbing; }
.date-reel-unified .reel-col::before,
.date-reel-unified .reel-col::after {
    content: ''; position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none;
}
.date-reel-unified .reel-col::before {
    top: 0; height: 16px; background: linear-gradient(180deg, rgba(10,10,15,1) 0%, transparent 100%);
}
.date-reel-unified .reel-col::after {
    bottom: 0; height: 16px; background: linear-gradient(0deg, rgba(10,10,15,1) 0%, transparent 100%);
}
.date-reel-unified .reel-col-dow { flex: 1; min-width: 0; }
.date-reel-unified .reel-col-mo  { width: 62px; }
.date-reel-unified .reel-col-day { width: 46px; }
.date-reel-unified .reel-col-yr  { width: 62px; }
.date-reel-unified .reel-col-mo,
.date-reel-unified .reel-col-day { border-right: 1px solid rgba(64,64,80,0.4); }
.date-reel-unified .reel-label {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 68px; text-align: center;
    font-size: 9px; font-weight: bold; color: #f9e076; letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(243,156,18,0.3);
    z-index: 3; pointer-events: none; white-space: nowrap;
}
.date-reel-unified .reel-pointer {
    position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
    font-size: 8px; color: #f9e076; text-shadow: 0 0 8px rgba(243,156,18,0.3);
    z-index: 3; pointer-events: none;
}
.date-reel-unified .reel-col-dow .d-item { padding-left: 94px; font-size: 9px; letter-spacing: 0.5px; }
.date-reel-unified .reel-col-dow .d-item.active { color: #d4a055; text-shadow: 0 0 8px rgba(212,160,85,0.4); }
.date-reel-unified .reel-track { position: relative; z-index: 1; will-change: transform; }

/* Smart quick-date button active state */
.quick-date-btn.qd-active {
    background: linear-gradient(180deg, #4a4030, #3a3020); color: #f4d03f;
    border-color: #f39c12; text-shadow: 0 0 8px rgba(243,156,18,0.3);
}

/* Legacy date reels (quest maker) */
.date-reels { display: flex; gap: 6px; margin-bottom: 14px; }
.date-reel-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; }
.date-reel-wrap .sec-label { margin-bottom: 4px; text-align: center; min-width: auto; }
.reel-date {
    position: relative; width: 100%; height: 54px; overflow: hidden;
    touch-action: none; user-select: none; cursor: grab;
}
.reel-date:active { cursor: grabbing; }
.reel-date::before, .reel-date::after {
    content: ''; position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none;
}
.reel-date::before { top: 0; height: 12px; background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, transparent 100%); }
.reel-date::after { bottom: 0; height: 12px; background: linear-gradient(0deg, rgba(26,26,46,0.95) 0%, transparent 100%); }

.d-item {
    height: 22px; display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #3a3020;
    transition: color 0.15s ease, text-shadow 0.15s ease; white-space: nowrap; padding: 0 4px;
}
.d-item.active { color: #f9e076; text-shadow: 0 0 8px rgba(243,156,18,0.3); }

/* Reel row layout */
.reel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.reel-row .sec-label { margin-bottom: 0; min-width: 55px; text-align: right; }

/* Toggle switch */
.toggle-section { margin-bottom: 0; }
.toggle-row {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 8px 10px;
    margin-bottom: 0;
}
.toggle-label { font-size: 10px; color: #f39c12; display: flex; align-items: center; gap: 8px; }
.toggle-label .tl-emoji { font-size: 12px; }

.toggle-switch {
    position: relative; width: 52px; height: 26px;
    background: url('/static/images/backgrounds/Stars.png') repeat #1a1a2e;
    border-style: solid; border-width: 2px;
    border-color: #252530 #555565 #6a6a7a #404050;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6);
    cursor: pointer; overflow: hidden;
}
.toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: #404050;
    border-style: solid; border-width: 2px;
    border-color: #6a6a7a #303040 #252530 #555565;
    transition: all 0.2s ease;
}
.toggle-switch.on .toggle-knob {
    left: 28px; background: #f39c12;
    border-color: #f9e076 #a08208 #806008 #f39c12;
    box-shadow: 0 0 6px rgba(243,156,18,0.4);
}
.toggle-switch.on {
    background: #2a2010;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 0 0 4px rgba(243,156,18,0.15);
}
.toggle-switch.priority-on .toggle-knob {
    background: #e74c3c;
    border-color: #ff6b6b #c0392b #8a2020 #e74c3c;
    box-shadow: 0 0 6px rgba(231,76,60,0.5);
}
.toggle-switch.priority-on {
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 0 0 4px rgba(231,76,60,0.2);
}

/* Adventure plan action buttons */
.qc-actions { display: flex; gap: 6px; margin-top: 4px; }
.qc-btn {
    flex: 1; padding: 11px; font-family: 'Press Start 2P', cursive; font-size: 8px;
    cursor: pointer; text-align: center; border-style: solid; border-width: 3px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.qc-btn:active { transform: translate(2px,2px); box-shadow: none; text-shadow: none; }
.qc-trash { background: #5a1a10; border-color: #8a3020 #4a1008 #2a0804 #6a2018; color: #c88; }
.qc-skip { background: #2a2518; border-color: #4a4028 #2a2010 #1a1008 #3a3018; color: #6a5a38; }
.qc-assign { background: linear-gradient(180deg, #2ecc71, #27ae60); border-color: #5efc99 #1a9c4d #127a3d #3abc6d; color: #1a3a1a; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }

/* Adventure plan — item name display */
.qc-name-display {
    font-family: 'Press Start 2P', cursive; font-size: 11px;
    color: #f9e076; text-shadow: 1px 1px 0 #000;
    text-align: center; padding: 8px 4px;
    word-break: break-word; line-height: 1.6;
}

/* Adventure plan — block type list inside plan card */
.ap-block-types {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px;
}

/* ========================================
   QUEST BOARD CALENDAR OVERLAY
   ======================================== */
.quest-board-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    background: rgba(10, 10, 20, 0.92);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.quest-board-overlay.active { display: block; }

/* --- Wooden Board Background --- */
.quest-board-overlay .board-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    min-height: 90vh;
    margin: 20px auto;
    padding: 30px 30px 20px;
    background:
        repeating-linear-gradient(90deg, transparent 0px, transparent 140px, rgba(0,0,0,0.15) 140px, rgba(0,0,0,0.15) 143px),
        repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px),
        radial-gradient(ellipse 12px 18px at 200px 300px, rgba(80,50,20,0.5) 0%, transparent 100%),
        radial-gradient(ellipse 8px 12px at 700px 450px, rgba(80,50,20,0.4) 0%, transparent 100%),
        radial-gradient(ellipse 10px 15px at 900px 200px, rgba(80,50,20,0.3) 0%, transparent 100%),
        linear-gradient(180deg, #4a2e14 0%, #5a381c 15%, #694222 30%, #5a381c 50%, #4a2e14 70%, #5a381c 85%, #694222 100%);
    border: 6px solid #3a2210;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 0 30px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
    border-radius: 4px;
}

/* Board nail corners */
.quest-board-overlay .board-container::before,
.quest-board-overlay .board-container::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
    z-index: 10;
}
.quest-board-overlay .board-container::before { top: 12px; left: 12px; }
.quest-board-overlay .board-container::after { top: 12px; right: 12px; }
.quest-board-overlay .board-nails { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.quest-board-overlay .board-nails::before,
.quest-board-overlay .board-nails::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
    z-index: 10;
}
.quest-board-overlay .board-nails::before { bottom: 12px; left: 12px; }
.quest-board-overlay .board-nails::after { bottom: 12px; right: 12px; }

/* --- Banner --- */
.quest-board-overlay .banner { text-align: center; margin-bottom: 28px; position: relative; }
.quest-board-overlay .banner-wrap { display: inline-flex; align-items: stretch; position: relative; }
.quest-board-overlay .ribbon-side {
    position: relative; z-index: 0; width: 28px; margin-top: 6px; margin-bottom: 6px;
    background: linear-gradient(180deg, #7a1515, #5a0d0d); border: 2px solid #4a0a0a;
}
.quest-board-overlay .ribbon-left { margin-right: -2px; clip-path: polygon(0 50%, 30% 0, 100% 0, 100% 100%, 30% 100%); }
.quest-board-overlay .ribbon-right { margin-left: -2px; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.quest-board-overlay .banner-bg {
    display: inline-block; position: relative; z-index: 1; padding: 14px 50px;
    background: linear-gradient(180deg, #8b1a1a 0%, #6b1010 50%, #8b1a1a 100%);
    border: 3px solid #4a0a0a; box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.quest-board-overlay .banner h2 {
    font-size: 13px; color: #f4d03f;
    text-shadow: 2px 2px 0 #4a0a0a, 0 0 10px rgba(244,208,63,0.3);
    letter-spacing: 2px; white-space: nowrap;
}

/* --- Nav Buttons --- */
.quest-board-overlay .nav-row { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.quest-board-overlay .nav-btn {
    font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 8px 16px;
    background: linear-gradient(180deg, #3a2210, #2a1808); color: #d4a055;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    border: 2px solid #8b6914; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.quest-board-overlay .nav-btn:hover {
    background: linear-gradient(180deg, #4a3218, #3a2210); color: #f4d03f;
    box-shadow: 0 0 10px rgba(244,208,63,0.2);
}

/* --- Content Area --- */
.quest-board-overlay .content-area { position: relative; min-height: 500px; }
.quest-board-overlay .view-panel { transition: opacity 0.3s ease, transform 0.3s ease; }
.quest-board-overlay .view-panel.hidden { display: none; }

/* ============================
   QB MONTHLY VIEW
   ============================ */
.quest-board-overlay .month-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 8px; padding: 10px;
}
.quest-board-overlay .dow-header {
    text-align: center; font-size: 7px; color: #8b6914; padding-bottom: 8px;
    border-bottom: 2px solid rgba(139,105,20,0.3); margin-bottom: 4px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.quest-board-overlay .day-slot {
    min-height: 90px; position: relative; display: flex; align-items: flex-start; justify-content: center;
}

/* Empty day */
.quest-board-overlay .empty-day-wrapper {
    position: relative; width: 100%; min-height: 80px; padding-top: 10px;
    margin-top: 6px; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: center;
}
.quest-board-overlay .empty-day-num {
    font-size: clamp(7px, 1.8vw, 14px); color: #3a2210; text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 4px rgba(80,50,20,0.25);
}

/* --- Quest Card --- */
.quest-board-overlay .quest-card {
    position: relative; width: 100%; min-height: 80px; padding: 10px 6px 12px 6px;
    cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; transform-origin: top center;
    transform: rotate(var(--card-tilt, 0deg));
    background: linear-gradient(170deg, #f5e6c8 0%, #edd9b4 30%, #e8d0a0 60%, #f0dbb8 100%);
    border: 1px solid #c4a06a;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.4), inset 0 0 15px rgba(139,105,20,0.1);
    margin-top: 6px;
}
.quest-board-overlay .quest-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at 20% 80%, rgba(139,105,20,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(139,105,20,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.quest-board-overlay .card-pin {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
    z-index: 5;
}
.quest-board-overlay .quest-card:hover {
    --card-tilt: 0deg;
    transform: scale(1.06) rotate(var(--card-tilt));
    box-shadow: 4px 6px 16px rgba(0,0,0,0.5); z-index: 20;
}
.quest-board-overlay .quest-card.today-card {
    border: 2px solid #f39c12;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.4), 0 0 12px rgba(243,156,18,0.4), inset 0 0 15px rgba(139,105,20,0.1);
    animation: qbTodayGlow 2s ease-in-out infinite, qbTodayFlash 0.6s ease-out 0.3s;
}
@keyframes qbTodayGlow {
    0%, 100% { box-shadow: 2px 3px 8px rgba(0,0,0,0.4), 0 0 10px rgba(243,156,18,0.3); }
    50% { box-shadow: 2px 3px 8px rgba(0,0,0,0.4), 0 0 20px rgba(243,156,18,0.6); }
}
@keyframes qbTodayFlash {
    0% { filter: brightness(1); }
    35% { filter: brightness(1.25); }
    100% { filter: brightness(1); }
}

/* Today highlight on empty day slots (monthly) */
.quest-board-overlay .empty-day-wrapper.today-empty {
    border: 2px solid #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.3), inset 0 0 8px rgba(243,156,18,0.1);
    animation: qbTodayGlow 2s ease-in-out infinite, qbTodayFlash 0.6s ease-out 0.3s;
}
.quest-board-overlay .empty-day-wrapper.today-empty .empty-day-num {
    color: #f39c12; font-weight: bold;
    text-shadow: 0 0 6px rgba(243,156,18,0.5), 1px 1px 2px rgba(0,0,0,0.5);
}

/* Today highlight on empty weekly rows */
.quest-board-overlay .week-row-empty.today-row {
    border: 2px solid #f39c12;
    box-shadow: 0 0 10px rgba(243,156,18,0.3);
    animation: qbTodayFlash 0.6s ease-out 0.3s;
}
.quest-board-overlay .week-row-empty.today-row .week-row-day-label {
    color: #f39c12;
    text-shadow: 0 0 6px rgba(243,156,18,0.5), 1px 1px 2px rgba(0,0,0,0.5);
}

/* Past quest cards — darker/faded parchment */
.quest-board-overlay .quest-card.past-card {
    background: linear-gradient(170deg, #d4c4a0 0%, #c9b890 30%, #bfad80 60%, #ccb998 100%);
    border-color: #a08550;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.3), inset 0 0 15px rgba(80,60,10,0.15);
}
.quest-board-overlay .quest-card.past-card .card-day {
    color: rgba(58,34,16,0.5);
}
.quest-board-overlay .quest-card.past-card .task-line {
    opacity: 0.6;
}

/* Branch stripes — horizontal bar at bottom */
.quest-board-overlay .card-stripes {
    position: absolute; bottom: 3px; left: 4px; right: 4px;
    display: flex; flex-direction: row; gap: 2px; height: 5px;
}
.quest-board-overlay .stripe-segment { flex: 1; display: flex; flex-direction: row; gap: 1px; }
.quest-board-overlay .stripe-block { flex: 1; border-radius: 1px; }
.quest-board-overlay .card-day {
    font-size: clamp(7px, 1.8vw, 14px); color: #3a2210; text-align: center; margin-bottom: 2px;
    position: relative; z-index: 1;
}
.quest-board-overlay .card-preview { margin-top: 3px; line-height: 1.9; position: relative; z-index: 1; overflow: hidden; text-align: left; }
.quest-board-overlay .task-line { font-size: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================
   QB WEEKLY VIEW
   ============================ */
.quest-board-overlay .week-rows { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.quest-board-overlay .week-row {
    display: flex; align-items: stretch;
    background: linear-gradient(170deg, #f5e6c8 0%, #edd9b4 30%, #e8d0a0 60%, #f0dbb8 100%);
    border: 1px solid #c4a06a;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.3), inset 0 0 10px rgba(139,105,20,0.08);
    min-height: 58px; position: relative; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s; margin-left: 8px; margin-right: 8px;
}
.quest-board-overlay .week-row:hover { transform: translateX(3px); box-shadow: 3px 4px 12px rgba(0,0,0,0.4); z-index: 5; }
.quest-board-overlay .week-row-pin-left,
.quest-board-overlay .week-row-pin-right {
    position: absolute; top: 8px; width: 11px; height: 11px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
    z-index: 5;
}
.quest-board-overlay .week-row-pin-left { left: -6px; }
.quest-board-overlay .week-row-pin-right { right: -6px; }
.quest-board-overlay .week-row.today-row {
    border: 2px solid #f39c12;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.3), 0 0 12px rgba(243,156,18,0.3);
    animation: qbTodayFlash 0.6s ease-out 0.3s;
}

/* Weekly empty day */
.quest-board-overlay .week-row-empty {
    display: flex; align-items: stretch; background: transparent; border: none; box-shadow: none;
    min-height: 42px; position: relative; cursor: pointer; transition: transform 0.2s;
    margin-left: 8px; margin-right: 8px;
}
.quest-board-overlay .week-row-empty:hover { transform: translateX(3px); }
.quest-board-overlay .week-row-empty .week-row-left { border-right: none; }
.quest-board-overlay .week-row-empty .week-row-day-label {
    color: rgba(139,105,20,0.35);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 4px rgba(80,50,20,0.25);
}
.quest-board-overlay .week-row-left {
    width: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    padding: 8px 10px; border-right: 2px solid rgba(139,105,20,0.2);
}
.quest-board-overlay .week-row-day-label { font-size: 11px; color: #3a2210; white-space: nowrap; }
.quest-board-overlay .week-row-tasks {
    flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; align-items: center;
}
.quest-board-overlay .week-task-block {
    display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.15); font-size: 6px; color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4); box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.quest-board-overlay .week-task-block .task-emoji { font-size: 10px; }
.quest-board-overlay .week-task-block .task-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-board-overlay .week-empty-msg { font-size: 7px; color: #b8a080; padding: 8px 10px; display: flex; align-items: center; }

/* ============================
   QB DAILY VIEW
   ============================ */
.quest-board-overlay .daily-branches { display: flex; flex-direction: column; gap: 16px; padding: 10px; }
.quest-board-overlay .daily-branch-card {
    background: linear-gradient(170deg, #f5e6c8 0%, #edd9b4 30%, #e8d0a0 60%, #f0dbb8 100%);
    border: 1px solid #c4a06a; padding: 14px 16px 12px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.4), inset 0 0 15px rgba(139,105,20,0.08);
    position: relative; margin-left: 8px; margin-right: 8px;
}
.quest-board-overlay .daily-branch-pin-left,
.quest-board-overlay .daily-branch-pin-right {
    position: absolute; top: -5px; width: 12px; height: 12px;
    background: radial-gradient(circle, #888 30%, #555 60%, #333 100%);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.5);
    z-index: 5;
}
.quest-board-overlay .daily-branch-pin-left { left: 16px; }
.quest-board-overlay .daily-branch-pin-right { right: 16px; }
.quest-board-overlay .daily-branch-header {
    display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
    margin-bottom: 10px; border-bottom: 2px solid rgba(139,105,20,0.2);
}
.quest-board-overlay .daily-branch-stripe { width: 6px; align-self: stretch; border-radius: 1px; }
.quest-board-overlay .daily-branch-emoji { font-size: 18px; }
.quest-board-overlay .daily-branch-name { font-size: 10px; color: #3a2210; letter-spacing: 1px; }
.quest-board-overlay .daily-task-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid rgba(139,105,20,0.12);
}
.quest-board-overlay .daily-task-row:last-child { border-bottom: none; }
.quest-board-overlay .daily-task-name { font-size: 8px; color: #3a2210; line-height: 1.6; flex: 1; }
.quest-board-overlay .daily-task-actions { display: flex; gap: 6px; flex-shrink: 0; }
.quest-board-overlay .daily-task-actions .qc-btn {
    flex: none; font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 5px 10px;
    border-width: 2px; letter-spacing: 1px;
}
.quest-board-overlay .daily-plan-btn {
    background: linear-gradient(180deg, #9b59b6, #7b3996);
    border-color: #bb79d6 #6a2986 #4a1966 #8b49a6; color: #eee;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* High-priority pulse animation */
.stripe-pulse {
    animation: qbPriorityPulse 1.2s ease-in-out infinite;
}
@keyframes qbPriorityPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 3px var(--pulse-color, #fff); }
    50% { opacity: 0.5; box-shadow: 0 0 8px var(--pulse-color, #fff), 0 0 14px var(--pulse-color, #fff); }
}
.quest-board-overlay .task-prio { font-size: 8px; margin-right: 2px; }
.quest-board-overlay .daily-empty {
    text-align: center; padding: 40px 20px; font-size: 8px;
    color: rgba(139,105,20,0.35); line-height: 2.4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 4px rgba(80,50,20,0.25);
}

/* ============================
   QB COLOR GUIDE
   ============================ */
.quest-board-overlay .color-guide {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 12px;
    margin-top: 18px; padding-bottom: 14px;
}
.quest-board-overlay .guide-chip { display: flex; align-items: center; gap: 6px; }
.quest-board-overlay .guide-swatch {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; border: 3px solid; box-shadow: 0 3px 6px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.quest-board-overlay .guide-label {
    font-size: 9px; color: #d4a055; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* ============================
   QB BOTTOM BAR — Mode Buttons
   ============================ */
.quest-board-overlay .bottom-bar {
    display: flex; justify-content: center; gap: 8px; padding-top: 14px;
    border-top: 2px solid rgba(139,105,20,0.2);
}
.quest-board-overlay .mode-btn {
    font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 8px 18px;
    border: 3px solid; cursor: pointer; transition: all 0.2s;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3); letter-spacing: 1px;
}
.quest-board-overlay .mode-btn.active {
    background: linear-gradient(180deg, #a866c0, #9b59b6, #8e4da8); color: #f0e0ff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0; box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.quest-board-overlay .mode-btn.active:hover {
    background: linear-gradient(180deg, #b876d0, #a866c0, #9b59b6); color: #fff;
    box-shadow: 0 0 12px rgba(155,89,182,0.4);
}
.quest-board-overlay .mode-btn:not(.active) {
    background: linear-gradient(180deg, #555, #444, #3a3a3a); color: #777;
    border-color: #666 #333 #2a2a2a #555; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.quest-board-overlay .mode-btn:not(.active):hover {
    background: linear-gradient(180deg, #666, #555, #4a4a4a); color: #999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.quest-board-overlay .mode-btn:active { transform: translateY(1px); }

/* ============================
   QB RESPONSIVE — TABLETS
   ============================ */
@media (max-width: 768px) {
    .quest-board-overlay .board-container {
        margin: 10px auto;
        padding: 20px 14px 14px;
        min-height: auto;
    }
    .quest-board-overlay .banner { margin-bottom: 16px; }
    .quest-board-overlay .banner-bg { padding: 10px 28px; }
    .quest-board-overlay .banner h2 { font-size: 11px; letter-spacing: 1px; }
    .quest-board-overlay .ribbon-side { width: 20px; }
    .quest-board-overlay .nav-row { gap: 10px; margin-bottom: 16px; }
    .quest-board-overlay .nav-btn { font-size: 8px; padding: 6px 12px; }
    .quest-board-overlay .content-area { min-height: 300px; }
    .quest-board-overlay .month-grid { gap: 6px 4px; padding: 6px; }
    .quest-board-overlay .day-slot { min-height: 70px; }
    .quest-board-overlay .quest-card { min-height: 60px; padding: 8px 4px 10px 4px; }
    .quest-board-overlay .task-line { font-size: 4px; }
    .quest-board-overlay .empty-day-wrapper { min-height: 60px; }
    .quest-board-overlay .week-row-left { width: 80px; padding: 6px 8px; }
    .quest-board-overlay .week-row-day-label { font-size: 9px; }
    .quest-board-overlay .week-task-block { font-size: 5px; padding: 3px 6px; }
    .quest-board-overlay .week-task-block .task-emoji { font-size: 8px; }
    .quest-board-overlay .week-task-block .task-label { max-width: 100px; }
    .quest-board-overlay .daily-branch-card { padding: 10px 12px 8px; }
    .quest-board-overlay .daily-branch-name { font-size: 9px; }
    .quest-board-overlay .daily-task-name { font-size: 7px; }
    .quest-board-overlay .mode-btn { font-size: 8px; padding: 6px 12px; }
    .quest-board-overlay .guide-swatch { width: 22px; height: 22px; font-size: 11px; }
    .quest-board-overlay .guide-label { font-size: 7px; }
    .quest-board-overlay .color-guide { gap: 8px 10px; }
}

/* ============================
   QB RESPONSIVE — PHONES
   ============================ */
@media (max-width: 480px) {
    .quest-board-overlay .board-container {
        margin: 4px;
        padding: 14px 8px 10px;
        border-width: 4px;
    }
    /* Smaller corner nails */
    .quest-board-overlay .board-container::before,
    .quest-board-overlay .board-container::after,
    .quest-board-overlay .board-nails::before,
    .quest-board-overlay .board-nails::after {
        width: 10px; height: 10px;
    }
    .quest-board-overlay .board-container::before { top: 6px; left: 6px; }
    .quest-board-overlay .board-container::after { top: 6px; right: 6px; }
    .quest-board-overlay .board-nails::before { bottom: 6px; left: 6px; }
    .quest-board-overlay .board-nails::after { bottom: 6px; right: 6px; }

    .quest-board-overlay .banner { margin-bottom: 10px; }
    .quest-board-overlay .banner-bg { padding: 8px 18px; }
    .quest-board-overlay .banner h2 { font-size: 9px; letter-spacing: 1px; }
    .quest-board-overlay .ribbon-side { width: 14px; margin-top: 4px; margin-bottom: 4px; }
    .quest-board-overlay .nav-row { gap: 6px; margin-bottom: 10px; }
    .quest-board-overlay .nav-btn { font-size: 7px; padding: 5px 8px; }
    .quest-board-overlay .content-area { min-height: 200px; }

    /* Monthly — compact grid */
    .quest-board-overlay .month-grid { gap: 4px 3px; padding: 4px 2px; }
    .quest-board-overlay .dow-header { font-size: 5px; padding-bottom: 4px; margin-bottom: 2px; }
    .quest-board-overlay .day-slot { min-height: 52px; }
    .quest-board-overlay .quest-card { min-height: 44px; padding: 4px 3px 9px 3px; margin-top: 4px; }
    .quest-board-overlay .card-pin { width: 8px; height: 8px; top: -4px; }
    .quest-board-overlay .card-preview { margin-top: 1px; line-height: 1.6; }
    .quest-board-overlay .task-line { font-size: 3.5px; }
    .quest-board-overlay .card-stripes { bottom: 2px; left: 3px; right: 3px; height: 4px; }
    .quest-board-overlay .empty-day-wrapper { min-height: 44px; padding-top: 6px; }

    /* Weekly — stacked layout for narrow screens */
    .quest-board-overlay .week-rows { gap: 8px; padding: 6px 2px; }
    .quest-board-overlay .week-row { margin-left: 4px; margin-right: 4px; min-height: 44px; flex-wrap: wrap; }
    .quest-board-overlay .week-row-left { width: 70px; padding: 4px 6px; border-right-width: 1px; }
    .quest-board-overlay .week-row-day-label { font-size: 8px; }
    .quest-board-overlay .week-row-tasks { gap: 4px; padding: 4px 6px; }
    .quest-board-overlay .week-task-block { font-size: 5px; padding: 2px 5px; gap: 3px; }
    .quest-board-overlay .week-task-block .task-emoji { font-size: 7px; }
    .quest-board-overlay .week-task-block .task-label { max-width: 70px; }
    .quest-board-overlay .week-row-pin-left,
    .quest-board-overlay .week-row-pin-right { width: 8px; height: 8px; top: 6px; }
    .quest-board-overlay .week-row-pin-left { left: -4px; }
    .quest-board-overlay .week-row-pin-right { right: -4px; }
    .quest-board-overlay .week-row-empty { min-height: 32px; margin-left: 4px; margin-right: 4px; }
    .quest-board-overlay .week-empty-msg { font-size: 6px; padding: 4px 6px; }

    /* Daily — compact */
    .quest-board-overlay .daily-branches { gap: 10px; padding: 6px 2px; }
    .quest-board-overlay .daily-branch-card { padding: 8px 8px 6px; margin-left: 4px; margin-right: 4px; }
    .quest-board-overlay .daily-branch-pin-left,
    .quest-board-overlay .daily-branch-pin-right { width: 9px; height: 9px; top: -4px; }
    .quest-board-overlay .daily-branch-pin-left { left: 10px; }
    .quest-board-overlay .daily-branch-pin-right { right: 10px; }
    .quest-board-overlay .daily-branch-header { gap: 6px; padding-bottom: 6px; margin-bottom: 6px; }
    .quest-board-overlay .daily-branch-emoji { font-size: 14px; }
    .quest-board-overlay .daily-branch-name { font-size: 8px; }
    .quest-board-overlay .daily-task-row { gap: 6px; padding: 5px 0; }
    .quest-board-overlay .daily-task-name { font-size: 7px; }
    .quest-board-overlay .daily-empty { padding: 24px 12px; font-size: 7px; }

    /* Bottom bar */
    .quest-board-overlay .bottom-bar { gap: 4px; padding-top: 10px; }
    .quest-board-overlay .mode-btn { font-size: 7px; padding: 5px 10px; border-width: 2px; }
    .quest-board-overlay .color-guide { gap: 6px 8px; margin-top: 12px; padding-bottom: 10px; }
    .quest-board-overlay .guide-swatch { width: 18px; height: 18px; font-size: 9px; border-width: 2px; }
    .quest-board-overlay .guide-label { font-size: 6px; }
}

/* ========================================
   BRANCH DRAG-TO-REORDER
   ======================================== */
.branch.branch-dragging {
    z-index: 999;
    position: relative;
}
.branch.branch-drag-sibling {
    opacity: 0.55;
    /* transition set inline by JS from UI_MOTION_PX_PER_SEC */
}
.branch.branch-dragging .task,
.branch.branch-dragging .frequency-toggle {
    pointer-events: none;
}
.skill-tree.drag-active .branch {
    animation: none !important;
    opacity: 1 !important;
}

/* ========================================
   WIREFRAME DEBUG MODE
   ======================================== */
#wireframeBtn {
    background: #1a1a2e;
    color: #555;
    border: 1px solid #333;
    box-shadow: 2px 2px 0px #000;
}
#wireframeBtn:hover { color: #888; border-color: #555; }
#wireframeBtn.active { background: #111; color: #0f0; border-color: #0f0; }

#wireframeToast {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    z-index: 1200;
    display: none;
    pointer-events: none;
    background: #2a2a3a;
    color: #ccc;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    line-height: 2;
    padding: 10px 18px;
    text-align: center;
    border-radius: 6px 6px 0 0;
}
#wireframeToast .wf-code {
    font-weight: bold;
}
#wireframeToast .wf-region {
    margin-left: 8px;
    color: #0f0;
    font-style: italic;
}
#wireframeToast .wf-file {
    opacity: 0.5;
    font-size: 9px;
}
.wireframe-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1199;
    width: 18px;
    height: 18px;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    line-height: 18px;
    text-align: center;
    background: rgba(0, 255, 0, 0.9);
    color: #000;
    border: 1px solid #0a0;
    cursor: pointer;
    display: none;
}
body.wireframe *:hover > .wireframe-copy-btn {
    display: block;
}

body.wireframe *:not(#wireframeToast):not(.wireframe-copy-btn) {
    outline: 1px solid rgba(150, 150, 150, 0.2) !important;
}
body.wireframe .branch {
    outline: 2px solid rgba(200, 200, 200, 0.5) !important;
}
body.wireframe .branch-col-left,
body.wireframe .branch-col-right {
    outline: 1px solid rgba(180, 180, 180, 0.4) !important;
}
body.wireframe .tasks {
    outline: 1px dashed rgba(140, 140, 140, 0.4) !important;
}
body.wireframe .task {
    outline: 1px solid rgba(180, 180, 180, 0.5) !important;
}
body.wireframe .task-type {
    outline: 1px solid rgba(150, 150, 150, 0.4) !important;
}
body.wireframe .task-content {
    outline: 1px solid rgba(150, 150, 150, 0.4) !important;
}
body.wireframe .task-name {
    outline: 1px solid rgba(150, 150, 150, 0.4) !important;
}
body.wireframe .task-expand-arrow {
    outline: 1px solid rgba(150, 150, 150, 0.5) !important;
}
body.wireframe .task-expand-overlay {
    outline: 1px solid rgba(160, 160, 160, 0.5) !important;
}
body.wireframe .frequency-toggle,
body.wireframe .stats-tv {
    outline: 1px solid rgba(160, 160, 160, 0.4) !important;
}

/* ========================================
   BLOCK TYPE SELECTOR
   ======================================== */
.block-type-selector {
    max-width: 360px;
}
.block-type-selector .modal-body {
    display: flex; flex-direction: column; gap: 8px; padding: 12px;
    background: #2a2a3a;
    overflow: visible;
}
.block-type-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.btc-icon { font-size: 22px; flex-shrink: 0; }
.block-type-card .btc-icon {
    animation: catIconFloat 4s ease-in-out infinite, catIconGlow 3s ease-in-out infinite;
}
.block-type-card:nth-child(2) .btc-icon { animation-delay: -1.3s, -1s; }
.block-type-card:nth-child(3) .btc-icon { animation-delay: -2.6s, -2s; }
.btc-cat-habit .btc-icon { animation-name: catIconFloat, catIconGlowBlue; }
.btc-text { display: flex; flex-direction: column; gap: 3px; }
.btc-label { font-size: 9px; color: #f39c12; font-family: 'Press Start 2P', cursive; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.btc-in-use { opacity: 0.6; }
.btc-in-use-label {
    font-family: 'Press Start 2P', cursive; font-size: 5px;
    color: #7a7588; letter-spacing: 0.5px; font-style: italic;
}
.btc-desc { font-size: 7px; color: #6a5a38; font-family: 'Press Start 2P', cursive; line-height: 1.6; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }

/* Category selector (2-step add block) */
.category-btn-row {
    display: flex; gap: 10px; padding: 4px 0;
}
.category-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 8px; padding: 16px 10px; cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.category-btn .btc-icon {
    font-size: 28px; height: 32px; display: flex; align-items: center; justify-content: center;
    animation: catIconFloat 4s ease-in-out infinite, catIconGlow 3s ease-in-out infinite;
}
.category-btn:nth-child(2) .btc-icon {
    animation-delay: -2s, -1.5s;
}
@keyframes catIconFloat {
    0%   { transform: translate(0px, 0px); }
    15%  { transform: translate(1px, -1.5px); }
    30%  { transform: translate(-0.5px, 1px); }
    50%  { transform: translate(0.5px, -2px); }
    65%  { transform: translate(-1px, 0.5px); }
    80%  { transform: translate(0.5px, 1px); }
    100% { transform: translate(0px, 0px); }
}
@keyframes catIconGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(243,156,18,0.2)); }
    50% { filter: drop-shadow(0 0 10px rgba(243,156,18,0.6)) drop-shadow(0 0 20px rgba(231,76,60,0.3)); }
}
.category-btn:nth-child(1) .btc-icon {
    animation: catIconFloat 4s ease-in-out infinite, catIconGlowBlue 3s ease-in-out infinite;
}
@keyframes catIconGlowBlue {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(52,152,219,0.2)); }
    50% { filter: drop-shadow(0 0 10px rgba(52,152,219,0.6)) drop-shadow(0 0 20px rgba(41,128,185,0.3)); }
}
.cat-label {
    font-size: 12px; font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px #000);
    white-space: nowrap;
}
.cat-desc {
    font-size: 7px; color: #6a5a38; font-family: 'Press Start 2P', cursive;
    line-height: 1.6; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); text-align: center;
}
.block-type-back-btn {
    background: transparent; border: none; cursor: pointer;
    font-size: 8px; font-family: 'Press Start 2P', cursive;
    color: #6a5a38; padding: 4px 0; margin-bottom: 4px;
    transition: color 0.15s ease;
}
.block-type-back-btn:hover { color: #f39c12; }

/* Birthday theme */
.birthday-banner {
    background: linear-gradient(135deg, #2d1b3d, #1a1830);
    border: 2px solid #c060a0; padding: 12px; text-align: center;
    margin-bottom: 10px;
}
.birthday-banner-emojis { font-size: 20px; }
.birthday-banner-text {
    font-size: 10px; color: #e0a0d0; font-family: 'Press Start 2P', cursive;
    margin-top: 6px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.gift-chip.active {
    background: #8e3a6e !important; border-color: #c060a0 !important; color: #fff !important;
}
.task[data-task-type="birthday"] {
    border-color: #c060a0 !important;
}
.task[data-task-type="birthday"] .task-name-text {
    color: #e0a0d0;
}
.birthday-today {
    animation: birthdayGlow 3s ease-in-out infinite;
}
@keyframes birthdayGlow {
    0%   { box-shadow: 0 0 8px rgba(192,96,160,0.6); }
    25%  { box-shadow: 0 0 12px rgba(100,80,200,0.6); }
    50%  { box-shadow: 0 0 12px rgba(80,160,220,0.6); }
    75%  { box-shadow: 0 0 12px rgba(220,180,60,0.6); }
    100% { box-shadow: 0 0 8px rgba(192,96,160,0.6); }
}
.modal-content.unified-modal.birthday-modal {
    border-color: #c060a0;
    box-shadow: 0 0 20px rgba(192,96,160,0.3);
}

/* Expedition block styles */
.expedition-banner {
    background: linear-gradient(135deg, #1b2d3d, #182a30);
    border: 2px solid #40a0c0; padding: 12px; text-align: center;
    margin-bottom: 10px;
}
.expedition-banner-emojis { font-size: 20px; }
.expedition-banner-text {
    font-size: 10px; color: #80d0e0; font-family: 'Press Start 2P', cursive;
    margin-top: 6px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.expedition-date-label {
    color: #80d0e0 !important;
}
.expedition-duration {
    font-family: 'Press Start 2P', cursive; font-size: 10px;
    color: #80d0e0; text-align: center; padding: 8px 0 2px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.expedition-duration-error {
    color: #e74c3c;
}
.task[data-task-type="expedition"] {
    border-color: #40a0c0 !important;
}
.task[data-task-type="expedition"] .task-name-text {
    color: #80d0e0;
}
.modal-content.unified-modal.expedition-modal {
    border-color: #40a0c0;
    box-shadow: 0 0 20px rgba(64,160,192,0.3);
}

/* Unified modal — purple plan theme */
.unified-modal.plan-theme {
    border-color: #9b59b6;
    box-shadow: 0 0 30px rgba(155,89,182,0.3);
}
.unified-modal.plan-theme .modal-header {
    background: rgba(0,0,0,0.2);
    border-bottom: none;
}
.unified-modal.plan-theme .um-header-title {
    background: linear-gradient(180deg, #b070d0, #7b3fa0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.unified-modal.plan-theme .um-name-input {
    color: #d8b0f0;
    caret-color: #d8b0f0;
}
.unified-modal.plan-theme .um-name-input::placeholder {
    color: #6a4a8a;
}
.unified-modal.plan-theme .sec-label {
    color: #c0a0d8;
}
.unified-modal.plan-theme .freq-btn.active,
.unified-modal.plan-theme .time-chip.active,
.unified-modal.plan-theme .reminder-chip.active,
.unified-modal.plan-theme .date-chip.active,
.unified-modal.plan-theme .completion-mode-btn.active,
.unified-modal.plan-theme .scope-btn.active {
    color: #d8b0f0; background: #32303e;
    border-color: #9b59b6;
    text-shadow: 0 0 4px rgba(155,89,182,0.4);
    box-shadow: 0 0 6px rgba(155,89,182,0.2);
}
.unified-modal.plan-theme .dur-btn { color: #8a6aa0; }
.unified-modal.plan-theme .dur-value { color: #d8b0f0; }
.unified-modal.plan-theme .um-date-toggle:hover {
    color: #d8b0f0;
    box-shadow: inset 0 0 20px 8px rgba(0,0,0,0.8), 0 0 4px rgba(155,89,182,0.2);
}
.unified-modal.plan-theme .toggle-switch.on .toggle-knob {
    background: #9b59b6;
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
    box-shadow: 0 0 6px rgba(155,89,182,0.4);
}
.unified-modal.plan-theme .reel-item.active,
.unified-modal.plan-theme .d-item.active {
    color: #d8b0f0; text-shadow: 0 0 10px rgba(155,89,182,0.4);
}
.unified-modal.plan-theme .modal-save-btn {
    background: linear-gradient(180deg, #a866c0, #9b59b6);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
}
.unified-modal.plan-theme .modal-save-btn:hover {
    background: linear-gradient(180deg, #ba7ed0, #a866c0);
}
.unified-modal.plan-theme .add-todo-input:focus {
    outline: none;
}
.unified-modal.plan-theme .toggle-label { color: #8a6aa0; }
.unified-modal.plan-theme .btc-label { color: #d8b0f0; }
/* Plan theme — checklist elements */
.unified-modal.plan-theme .hq-checkbox {
    border-color: rgba(180,130,220,0.5);
}
.unified-modal.plan-theme .hq-checkbox:hover {
    border-color: #b070d0;
}
.unified-modal.plan-theme .hq-checkbox.checked {
    border-color: #b070d0;
    color: #d8b0f0;
}
.unified-modal.plan-theme .hq-todo-text.checked {
    color: #6a5080;
}
.unified-modal.plan-theme .add-todo-input {
    caret-color: #b070d0;
}
.unified-modal.plan-theme .add-todo-input::placeholder {
    color: #4a3a5a;
}
.unified-modal.plan-theme .add-todo-btn {
    background: linear-gradient(180deg, #a866c0, #9b59b6);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
}
.unified-modal.plan-theme .add-todo-btn:hover {
    background: linear-gradient(180deg, #ba7ed0, #a866c0);
}
.unified-modal.plan-theme .modal-create-btn {
    background: linear-gradient(180deg, #a866c0, #9b59b6);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
}
.unified-modal.plan-theme .modal-create-btn:hover {
    background: linear-gradient(180deg, #ba7ed0, #a866c0);
}
.unified-modal.plan-theme .hold-indicator {
    background: #9b59b6;
}
.unified-modal.plan-theme .hq-heading {
    color: #d8b0f0;
}
.unified-modal.plan-theme .hq-divider {
    border-top-color: #4a3a5a;
}
.unified-modal.plan-theme .add-todo-container {
    border-top-color: #4a3a5a;
}
.unified-modal.plan-theme .modal-empty-title {
    color: #d8b0f0;
}
.unified-modal.plan-theme .um-date-toggle {
    color: #6a5080;
}
.unified-modal.plan-theme .qc-assign {
    background: linear-gradient(180deg, #a866c0, #9b59b6);
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* Block type selector — orange outline only on outer edge */
.block-type-selector {
    border-style: solid; border-width: 4px;
    border-color: #f39c12;
    box-shadow: 0 0 30px rgba(243,156,18,0.4);
}
.block-type-selector .modal-header {
    background: rgba(0,0,0,0.2);
    border-bottom: none;
    gap: 10px;
}
.block-type-title {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    text-align: center;
    background: linear-gradient(180deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0px #000);
}
.bt-task-name {
    font-family: 'Press Start 2P', cursive; font-size: 10px;
    color: #f9e076; text-shadow: 1px 1px 0 #000;
    text-align: center; padding: 6px 12px 2px;
}
.bt-task-name:empty { display: none; }

/* Plan selector — purple variant of block-type-selector */
.plan-selector {
    border-color: #9b59b6;
    box-shadow: 0 0 30px rgba(155,89,182,0.3);
}
.plan-selector .modal-header {
    background: transparent;
    border-bottom: none;
}
.plan-selector .modal-close {
    color: #b070d0;
}
.plan-selector .sec-label { color: #c0a0d8; }

/* Name-first step in quest maker body */
.qm-name-step {
    padding: 12px 8px 8px;
    text-align: center;
}
.qm-name-step .plan-name-input {
    width: 100%; box-sizing: border-box;
}

/* Plan header — name window + nav */
.plan-header {
    display: flex; align-items: center; gap: 8px;
}
.plan-name-input {
    flex: 1; min-width: 0;
    padding: 9px 10px;
    font-family: 'Press Start 2P', cursive; font-size: 11px;
    color: #d8b0f0; text-shadow: 1px 1px 0 #000;
    text-align: center; outline: none;
    caret-color: #d8b0f0;
    animation: caretBlink 1s step-end infinite;
}
.plan-name-input::placeholder {
    color: #6a4a8a; font-size: 10px;
}
.block-type-selector:not(.plan-selector) .plan-name-input {
    color: #f9e076;
    caret-color: #f9e076;
}
.block-type-selector:not(.plan-selector) .plan-name-input::placeholder {
    color: #5a4a28;
}
@keyframes caretBlink {
    0%, 100% { caret-color: currentColor; }
    50% { caret-color: transparent; }
}
.plan-quest-name {
    font-family: 'Press Start 2P', cursive; font-size: 11px;
    color: #f9e076; text-shadow: 1px 1px 0 #000;
    text-align: center; padding: 4px 8px 8px;
    word-break: break-word;
}
.plan-nav {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; position: relative;
    justify-content: center;
}
.plan-count {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    color: #8a6aaa; white-space: nowrap;
}
.plan-arrow {
    background: none; border: 2px solid #6a3080;
    color: #b070d0; font-family: 'Press Start 2P', cursive; font-size: 10px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.plan-arrow:active {
    border-color: #9b59b6; color: #d8b0f0;
}
.plan-arrow:disabled {
    opacity: 0.3; cursor: not-allowed;
}
.plan-delete {
    position: absolute; right: 0;
    font-size: 12px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.plan-delete .trash-icon {
    animation: trashGlow 2s ease-in-out infinite;
}
@keyframes trashGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(231,76,60,0.4)) drop-shadow(0 0 6px rgba(255,255,255,0.2)); }
    50% { filter: drop-shadow(0 0 8px rgba(231,76,60,0.8)) drop-shadow(0 0 12px rgba(255,255,255,0.4)); }
}
.plan-delete:active .trash-icon {
    animation: none;
    filter: drop-shadow(0 0 10px rgba(231,76,60,1)) drop-shadow(0 0 16px rgba(255,255,255,0.5));
}
@keyframes voidFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* Plan button */
.plan-btn { position: relative; color: white; text-shadow: 1px 1px 0 #b070d0; }
.plan-badge {
    position: absolute; top: -8px; right: -8px;
    background: #8e3a6e; border: 2px solid #c060a0;
    font-family: 'Press Start 2P', cursive; font-size: 8px; color: white;
    min-width: 18px; height: 18px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    animation: planBadgePulse 2s ease-in-out infinite;
}
.plan-badge.hide { display: none; }
@keyframes planBadgePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(142,58,110,0.3); }
    50% { box-shadow: 0 0 12px rgba(142,58,110,0.6); }
}

/* Plan and Add Block buttons inherit base grey from .quest-hub-btn */

/* ========================================
   FREQUENCY SELECTOR (in unified modal)
   ======================================== */
.freq-selector { margin-bottom: 12px; }
.freq-btn-row { display: flex; gap: 4px; }
.freq-btn {
    flex: 1; padding: 8px 4px; font-family: 'Press Start 2P', cursive; font-size: 7px;
    cursor: pointer; text-align: center;
    background: #3a3a4a;
    color: #fff;
    text-shadow: 1px 1px 0 #b070d0;
    border-style: solid; border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    outline: none;
    user-select: none; -webkit-user-select: none;
    transition: all 0.15s ease;
}
.freq-btn.active {
    background: linear-gradient(180deg, #a866c0, #9b59b6, #8e4da8);
    color: #f0e0ff;
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
    text-shadow: 1px 1px 0 #000, 0 0 6px rgba(155,89,182,0.5);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px rgba(155,89,182,0.3);
}
.freq-btn:active {
    border-color: #252530 #454555 #6a6a7a #353540;
    transform: translate(1px, 1px); box-shadow: none;
}

/* Freq options expand/collapse */
.freq-options {
    overflow: hidden;
    transition: max-height var(--expand-dur, 0.25s) ease-in-out, opacity var(--expand-dur, 0.25s) ease-in-out;
}
.freq-options.expanded { max-height: 200px; opacity: 1; margin-top: 0; }
.freq-options.collapsed { max-height: 0; opacity: 0; margin-top: 0; }

/* ========================================
   CHIP ROWS (time-of-day, reminders, days)
   ======================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 3px; }
.time-chip, .reminder-chip, .date-chip {
    padding: 6px 10px; font-family: 'Press Start 2P', cursive; font-size: 7px;
    cursor: pointer;
    background: #2a2a3a; color: #6a5a38;
    border: 3px solid #3a3a4a; outline: none;
    user-select: none; -webkit-user-select: none;
    transition: all 0.15s ease;
}
.time-chip.active, .reminder-chip.active, .date-chip.active {
    color: #f39c12; background: #32303e;
    border-color: #f39c12;
    text-shadow: 0 0 4px rgba(243,156,18,0.4);
    box-shadow: 0 0 6px rgba(243,156,18,0.15);
}
.time-chip:active, .reminder-chip:active { transform: translate(1px, 1px); }

/* Day chips — mini task blocks */
.day-chip {
    flex: 1; min-width: 0;
    padding: 10px 4px; font-family: 'Press Start 2P', cursive; font-size: 7px;
    text-align: center;
    cursor: pointer; outline: none;
    background: #3a3a4a; color: #fff;
    text-shadow: 1px 1px 0 #b070d0;
    border-style: solid; border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    user-select: none; -webkit-user-select: none;
    transition: all 0.15s ease;
}
.day-chip:active {
    border-color: #252530 #454555 #6a6a7a #353540;
    transform: translate(1px, 1px);
    box-shadow: none;
}
.day-chip.active {
    background: linear-gradient(180deg, #a866c0, #9b59b6, #8e4da8);
    color: #f0e0ff;
    border-color: #c080e0 #6a3080 #5a2870 #b070d0;
    text-shadow: 1px 1px 0 #000, 0 0 6px rgba(155,89,182,0.5);
    box-shadow: 3px 3px 6px rgba(0,0,0,0.5), 0 0 8px rgba(155,89,182,0.3);
}

/* Frequency sub-options (weekly days, monthly day) */
.freq-sub-options {
    overflow: hidden;
    transition: max-height 0.25s ease-in-out, opacity 0.25s ease-in-out, margin-top 0.25s ease-in-out;
}
.freq-sub-options.expanded { max-height: 200px; opacity: 1; margin-top: 6px; }
.freq-sub-options.collapsed { max-height: 0; opacity: 0; margin-top: 0; }
.freq-optional-label {
    font-family: 'Press Start 2P', cursive; font-size: 7px;
    color: #6a6a7a; text-align: center; margin-bottom: 4px;
}

.month-day-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.month-day-grid .day-chip {
    flex: 0 0 calc((100% - 24px) / 7);
    text-align: center; padding: 6px 2px;
    font-size: 6px;
}

/* ========================================
   DURABILITY COUNTER (in unified modal)
   ======================================== */
.durability-section { margin-top: 12px; }
.durability-row {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 8px 0;
}
.dur-btn {
    width: 30px; height: 30px; font-family: 'Press Start 2P', cursive; font-size: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: #2a2a3a; color: #6a5a38;
    border: 3px solid #3a3a4a; outline: none;
    user-select: none; -webkit-user-select: none;
}
.dur-btn:active { transform: translate(1px, 1px); }
.dur-value {
    font-family: 'Press Start 2P', cursive; font-size: 16px; color: #f39c12;
    min-width: 30px; text-align: center;
}

/* ========================================
   COMPLETION MODE (checklist modal)
   ======================================== */
.completion-mode { margin-top: 14px; padding-top: 10px; border-top: 2px solid #1a1810; }
.mode-row { display: flex; gap: 4px; }
.completion-mode-btn {
    flex: 1; padding: 8px 4px; font-family: 'Press Start 2P', cursive; font-size: 7px;
    cursor: pointer; text-align: center;
    background: #2a2a3a; color: #6a5a38;
    border: 3px solid #3a3a4a; outline: none;
    user-select: none; -webkit-user-select: none;
    transition: all 0.15s ease;
}
.completion-mode-btn.active {
    color: #f39c12; background: #32303e;
    border-color: #f39c12;
    text-shadow: 0 0 4px rgba(243,156,18,0.4);
    box-shadow: 0 0 6px rgba(243,156,18,0.15);
}
.completion-mode-btn:active { transform: translate(1px, 1px); }

/* ========================================
   EYE REQUIREMENTS (eye modal)
   ======================================== */
/* All Seeing Eye — requirements */
.eye-requirements { display: flex; flex-direction: column; gap: 6px; }
.eye-req {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; margin-bottom: 6px;
    transition: all 0.2s;
}
.eye-req-icon { font-size: 16px; flex-shrink: 0; }
.eye-req-info { flex: 1; }
.eye-req-title { font-size: 8px; color: #8a7a50; font-family: 'Press Start 2P', cursive; margin-bottom: 3px; }
.eye-req-desc { font-size: 10px; color: #4a4028; font-family: 'Press Start 2P', cursive; line-height: 1.5; }
.eye-req-status {
    font-size: 14px; flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #3a3020; background: #1a1810;
    font-family: 'Press Start 2P', cursive;
    transition: all 0.2s;
}
.eye-req.done .eye-req-status { background: #2d5a3d; border-color: #2ecc71; color: #2ecc71; }
.eye-req.done .eye-req-title { color: #2ecc71; }
.eye-req.locked .eye-req-title { color: #4a4028; }
.eye-req.locked .eye-req-icon { opacity: 0.4; }

/* Eye lock status bar */
.eye-lock-status {
    text-align: center; padding: 12px; margin-top: 10px;
    border: 2px dashed #3a3020; font-size: 7px; line-height: 1.6;
    font-family: 'Press Start 2P', cursive;
}
.eye-lock-status.locked { color: #5a2828; }
.eye-lock-status.unlocked { color: #2ecc71; border-color: #2ecc71; border-style: solid; }

/* Eye branch list in locked popup */
.eye-branch-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.eye-branch-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; font-size: 7px;
    font-family: 'Press Start 2P', cursive; color: #5a4a30;
}
.eye-branch-row.done { color: #2ecc71; }
.eye-branch-check { width: 16px; text-align: center; font-size: 10px; }
.eye-branch-name { flex: 1; }
.eye-branch-freqs { display: flex; gap: 4px; }
.eye-freq-tag {
    font-size: 10px; padding: 2px 5px;
    background: #1a1810; color: #4a4028;
    border: 1px solid #2a2518;
    font-family: 'Press Start 2P', cursive;
}
.eye-freq-tag.seen { color: #2ecc71; border-color: #2d5a3d; background: rgba(46,204,113,0.08); }

/* Habit time-locked popup */
.locked-habit-info { display: flex; flex-direction: column; gap: 6px; }
.habit-time-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
}
.habit-time-emoji { font-size: 16px; }
.habit-time-label { font-size: 9px; color: #8a7a50; font-family: 'Press Start 2P', cursive; }

/* Locked info popup */
.locked-info-popup { max-width: 380px; }
.locked-info-popup .modal-body { padding: 12px; }

/* Scope selector */
.scope-selector { display: flex; gap: 4px; margin-bottom: 10px; }
.scope-btn {
    flex: 1; padding: 8px 6px; font-family: 'Press Start 2P', cursive; font-size: 10px;
    cursor: pointer; text-align: center; line-height: 1.4;
    background: #2a2a3a; color: #6a5a38;
    border: 3px solid #3a3a4a; outline: none;
    user-select: none; -webkit-user-select: none;
    transition: all 0.2s;
}
.scope-btn:hover { color: #8a7a50; }
.scope-btn.active {
    color: #f9e076; background: #32303e;
    border-color: #f39c12;
    text-shadow: 0 0 4px rgba(243,156,18,0.4);
    box-shadow: 0 0 6px rgba(243,156,18,0.15);
}

/* ========================================
   REMINDER SECTION (quest modal)
   ======================================== */
.reminder-section { margin-top: 12px; }

/* ========================================
   DURABILITY SEGMENTS (on task buttons)
   ======================================== */
.dur-segments {
    display: flex; gap: 2px; padding: 2px 0;
    margin-top: 2px;
}
.dur-seg {
    flex: 1; height: 3px;
    background: #1a1a2e;
    border: 1px solid #2a2a3e;
}
.dur-seg.filled {
    background: var(--branch-color, #f39c12);
    border-color: var(--branch-color, #f39c12);
    box-shadow: 0 0 3px var(--branch-color, rgba(243,156,18,0.4));
}

/* ========================================
   LOCK INDICATOR (replaces orb/emoji)
   ======================================== */
.indicator-lock {
    font-size: 12px;
    line-height: 1;
    opacity: 0.7;
}

/* ========================================
   CHECKLIST UNLOCK POPUP
   ======================================== */
.checklist-unlock-popup {
    max-width: 320px;
}
.checklist-unlock-popup .modal-body {
    padding: 10px;
}
.checklist-unlock-items {
    display: flex; flex-direction: column; gap: 4px;
}
.checklist-unlock-items .hq-todo {
    padding: 8px 10px;
}

/* ============================
   MAIN PAGE RESPONSIVE — TABLETS
   ============================ */
@media (max-width: 768px) {
    .branch-header h2 { font-size: 11px; }
    .task-name { font-size: 9px; }
    .streak-info { font-size: 9px; }
    .modal-header h3 { font-size: 10px; }
    .modal-body { padding: 16px; }
    .branch { border-width: 4px; }
}

/* ============================
   ORACLE OVERLAY
   ============================ */
.oracle-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: url('/static/images/backgrounds/Stars.png') repeat #0a0a0f;
    overflow-y: auto; overflow-x: hidden;
}
.oracle-overlay.active { display: block; }

.oracle-container {
    position: relative; z-index: 10; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px 60px;
}
.oracle-header {
    text-align: center; margin-bottom: 40px; opacity: 0;
    animation: oracleFadeIn 2s ease forwards 0.5s;
}
.oracle-sigil {
    font-size: 40px; margin-bottom: 16px;
    filter: drop-shadow(0 0 12px rgba(212,168,83,0.5));
    animation: oracleSigilPulse 4s ease-in-out infinite;
}
@keyframes oracleSigilPulse {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(212,168,83,0.3)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 20px rgba(212,168,83,0.6)); transform: scale(1.05); }
}
.oracle-title {
    font-size: 13px; color: #d4a853; letter-spacing: 6px; text-transform: uppercase;
    text-shadow: 0 0 20px rgba(212,168,83,0.4); margin-bottom: 8px;
    font-family: 'Press Start 2P', cursive;
}
.oracle-subtitle {
    font-size: 8px; color: #7a7588; letter-spacing: 3px; text-transform: uppercase;
    font-family: 'Press Start 2P', cursive;
}
.oracle-table-surface {
    position: relative; width: 100%; max-width: 1100px; padding: 40px 20px 50px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(45,31,78,0.15) 2px, rgba(45,31,78,0.15) 4px),
        linear-gradient(180deg, #1a1528 0%, #15112a 100%);
    border: 2px solid #2d1f4e;
    box-shadow: 0 0 60px rgba(107,63,160,0.1), inset 0 0 80px rgba(0,0,0,0.4), 0 20px 60px rgba(0,0,0,0.5);
    opacity: 0; animation: oracleFadeIn 1.5s ease forwards 1s;
}
.oracle-table-surface::before {
    content: ''; position: absolute; inset: 6px;
    border: 1px solid rgba(212,168,83,0.1); pointer-events: none;
}
.oracle-table-rune {
    position: absolute; font-size: 14px; color: #8a6d2b; opacity: 0.3;
    animation: oracleRuneGlow 6s ease-in-out infinite;
}
.oracle-rune-tl { top: 12px; left: 14px; }
.oracle-rune-tr { top: 12px; right: 14px; animation-delay: 1.5s; }
.oracle-rune-bl { bottom: 12px; left: 14px; animation-delay: 3s; }
.oracle-rune-br { bottom: 12px; right: 14px; animation-delay: 4.5s; }
@keyframes oracleRuneGlow {
    0%, 100% { opacity: 0.2; text-shadow: none; }
    50% { opacity: 0.6; text-shadow: 0 0 8px rgba(212,168,83,0.4); }
}
.oracle-cards-spread {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; perspective: 1200px;
}
/* === DUAL-RENDER CARD WRAP === */
.card-wrap {
    width: 170px; height: 272px; position: relative;
    cursor: pointer; opacity: 0; transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.card-wrap.dealt { opacity: 1; transform: translateY(0); }
.card-wrap.oracle-hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.card-wrap.oracle-expanded { z-index: 20; position: relative; }

.card-lo {
    width: 170px; height: 272px; position: absolute; top: 0; left: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
    transform-origin: center center;
}
.card-wrap.oracle-expanded .card-lo { opacity: 0; transition: transform 0.5s ease, opacity 0.3s ease 0.2s; }

.card-hi {
    width: 340px; height: 544px; position: absolute; top: 0; left: 0;
    transform: scale(0.5); transform-origin: top left;
    opacity: 0; pointer-events: none;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.card-wrap.oracle-expanded .card-hi { opacity: 1; pointer-events: auto; transition: transform 0.5s ease, opacity 0.3s ease 0.15s; }

/* Flip only applies to lo-res card */
.card-wrap.revealed .card-lo .oracle-card-inner { transform: rotateY(180deg); }
.card-wrap.revealed .card-lo::after {
    content: ''; position: absolute; inset: -10px;
    background: radial-gradient(ellipse, var(--card-glow, rgba(107,63,160,0.3)) 0%, transparent 70%);
    opacity: 0; animation: oracleRevealGlow 1.2s ease-out forwards;
    pointer-events: none;
}

/* === HI-RES SIZE OVERRIDES (2x) === */
.card-hi .oracle-card-front { border-width: 4px; }
.card-hi .oracle-card-front::before { inset: 10px; }
.card-hi .oracle-card-stripe { height: 6px; }
.card-hi .oracle-card-art { height: 172px; margin: 8px 20px; }
.card-hi .oracle-card-art-icon { font-size: 104px; top: -8px; }
.card-hi .oracle-card-art::before { width: 200px; height: 200px; }
.card-hi .oracle-card-title { padding: 12px 20px; font-size: 14px; }
.card-hi .oracle-card-prophecy { padding: 12px 20px 24px; font-size: 16px; }
.card-hi .oracle-card-date { font-size: 16px; padding: 4px 16px; }
.card-hi .oracle-card-branch-tag { font-size: 16px; padding: 2px 16px 8px; }
.card-hi .oracle-card-numeral { padding: 20px 16px 8px; font-size: 12px; }
.card-hi .oracle-card-bottom { padding: 8px 16px 16px; }
.card-hi .oracle-planet-block svg { width: 56px; height: 56px; }
.card-hi .oracle-planet-label { font-size: 10px; }
.card-hi .intensity-label { font-size: 10px; }
.card-hi .intensity-bar { height: 18px; border-width: 4px; gap: 2px; padding: 2px; }
.card-hi .i-seg { border-width: 2px; }
.card-hi .id-element-line { font-size: 14px; }
.card-hi .id-rows { gap: 4px; }
.card-hi .id-row { padding: 4px 16px; }
.card-hi .id-label { font-size: 10px; }
.card-hi .id-value { font-size: 12px; }
.card-hi .id-footer { padding: 6px 16px 12px; }
.card-hi .id-footer-label { font-size: 10px; }
.card-hi .moon-element-meaning { font-size: 12px; padding: 8px 16px; }
.card-hi .moon-keywords { font-size: 10px; padding: 4px 16px; }
.card-hi .moon-phase-row { padding: 6px 16px; }
.card-hi .moon-phase-name { font-size: 10px; }
.card-hi .moon-phase-pct { font-size: 10px; }
.card-hi .moon-influence { font-size: 10px; padding: 6px 16px 12px; }
.card-hi .compat-moon-context { font-size: 10px; }
.card-hi .compat-grid { gap: 6px; padding: 4px 16px; }
.card-hi .compat-row-label { font-size: 10px; }
.card-hi .compat-sign-glyph { font-size: 24px; }
.card-hi .compat-sign-name { font-size: 8px; }
.card-hi .lucky-art-label { font-size: 14px; }
.card-hi .lucky-art-number { font-size: 40px; }

/* === TRANSIT CARD TWO-VIEW LAYOUT === */
.transit-top {
    padding: 8px 10px 4px; display: none;
    justify-content: space-between; align-items: center; flex-shrink: 0;
}
.oracle-card-front.orbit-active .transit-top { display: flex; }
.transit-bucket {
    font-size: 6px; letter-spacing: 1px; text-transform: uppercase;
    font-family: 'Press Start 2P', cursive;
}
.transit-planet-lbl {
    font-size: 5px; color: #7a7588; font-family: 'Press Start 2P', cursive;
}
.card-hi .transit-top { padding: 16px 20px 8px; }
.card-hi .transit-bucket { font-size: 12px; }
.card-hi .transit-planet-lbl { font-size: 10px; }

/* Prophecy view (default) / Orbit view (toggled) */
.transit-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.transit-view-orbit { display: none; }
.oracle-card-front.orbit-active .transit-view-prophecy { display: none; }
.oracle-card-front.orbit-active .transit-view-orbit { display: flex; }

/* Orbit overlay fills the flex area, clipped to card padding */
.orbit-overlay {
    flex: 1; position: relative; overflow: hidden;
    margin: 0 6px;
}
.orbit-overlay svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.card-hi .orbit-overlay { margin: 0 12px; }

/* Bottom description lines (only in orbit view) */
.transit-bottom { padding: 2px 10px 0; flex-shrink: 0; display: none; }
.oracle-card-front.orbit-active .transit-bottom { display: block; }
.transit-bottom-line {
    font-size: 5px; color: #c9b8e8; line-height: 1.8; text-align: center;
    font-family: 'Press Start 2P', cursive;
}
.transit-bottom-line.transit-aspect { color: #555568; }
.card-hi .transit-bottom { padding: 4px 20px 0; }
.card-hi .transit-bottom-line { font-size: 10px; }

/* Planet block is clickable on cards with orbit/showcase toggle */
.card-wrap .oracle-planet-block {
    cursor: pointer; position: relative; z-index: 5;
}
.card-wrap .oracle-planet-block:hover .oracle-planet-label {
    color: #d4a853;
}

/* === EXPLAIN OVERLAY (hi-res transit cards) === */
.card-explain {
    position: absolute; inset: 0;
    background: linear-gradient(170deg, #0f0d18 0%, #12111a 100%);
    display: flex; flex-direction: column;
    padding: 24px 20px; z-index: 5;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
    border: 4px solid rgba(212,168,83,0.3);
}
.card-explain.visible { opacity: 1; pointer-events: auto; }
.explain-header {
    font-size: 12px; color: #8a6d2b; letter-spacing: 2px;
    text-transform: uppercase; text-align: center;
    padding-bottom: 10px; border-bottom: 1px solid rgba(212,168,83,0.15); margin-bottom: 14px;
    font-family: 'Press Start 2P', cursive;
}
.explain-rows { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.explain-row { display: flex; flex-direction: column; gap: 3px; }
.explain-label { font-size: 10px; color: #8a6d2b; letter-spacing: 1px; text-transform: uppercase; font-family: 'Press Start 2P', cursive; }
.explain-value { font-size: 12px; color: #e8dcc8; line-height: 1.8; font-family: 'Press Start 2P', cursive; }
.explain-value .highlight { color: #f0c674; }
.explain-aspect-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.explain-aspect-symbol { font-size: 28px; flex-shrink: 0; }
.explain-aspect-text { font-size: 12px; color: #7a7588; line-height: 1.8; font-family: 'Press Start 2P', cursive; }
.explain-orb { font-size: 10px; color: #8a6d2b; margin-top: 2px; font-family: 'Press Start 2P', cursive; }
.explain-logic {
    font-size: 10px; color: #3a3648; line-height: 2;
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid rgba(212,168,83,0.08);
    text-align: center; font-style: italic; font-family: 'Press Start 2P', cursive;
}
.aspect-conjunction { color: #f0c674; }
.aspect-sextile { color: #4ec9b0; }
.aspect-square { color: #c84030; }
.aspect-trine { color: #4ec9b0; }
.aspect-opposition { color: #c84030; }

/* Hold ring */
.hold-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px; z-index: 6;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.hold-ring.active { opacity: 1; }
.hold-ring circle.progress {
    fill: none; stroke: #d4a853; stroke-width: 2;
    stroke-dasharray: 138.2; stroke-dashoffset: 138.2;
    stroke-linecap: round; transform: rotate(-90deg); transform-origin: center;
    filter: drop-shadow(0 0 4px rgba(212,168,83,0.5));
}
.hold-ring.active circle.progress { transition: stroke-dashoffset 0.6s linear; stroke-dashoffset: 0; }
.hold-ring circle.track { fill: none; stroke: rgba(212,168,83,0.15); stroke-width: 2; }

/* Legacy .oracle-card support (kept for any remaining single-card renders) */
.oracle-card {
    width: 170px; height: 272px; position: relative;
    transition: transform 0.3s ease;
    opacity: 0; transform: translateY(30px);
}
.oracle-card.dealt { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; cursor: pointer; }
.oracle-card.oracle-hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.oracle-card.oracle-expanded {
    transform: scale(2); z-index: 10; position: relative;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.oracle-card.revealed .oracle-card-inner { transform: rotateY(180deg); }
.oracle-card.revealed::after {
    content: ''; position: absolute; inset: -10px;
    background: radial-gradient(ellipse, var(--card-glow, rgba(107,63,160,0.3)) 0%, transparent 70%);
    opacity: 0; animation: oracleRevealGlow 1.2s ease-out forwards;
    pointer-events: none;
}
@keyframes oracleRevealGlow {
    0% { opacity: 0; transform: scale(0.8); }
    30% { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}
.oracle-card-inner {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.oracle-card-face {
    position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden;
}
.oracle-card-back {
    background: repeating-conic-gradient(from 0deg at 50% 50%, #2d1f4e 0deg 10deg, #1a1528 10deg 20deg);
    border: 2px solid #8a6d2b;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.4);
    backface-visibility: hidden;
}
.oracle-card-back::before {
    content: ''; position: absolute; inset: 6px;
    border: 1px solid #8a6d2b; opacity: 0.5;
}
.oracle-card-back-symbol {
    font-size: 36px; filter: drop-shadow(0 0 8px rgba(212,168,83,0.4));
    animation: oracleSymbolBreathe 3s ease-in-out infinite;
}
@keyframes oracleSymbolBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.08) rotate(3deg); }
}
.oracle-card-front {
    transform: rotateY(180deg) translateZ(1px);
    background: linear-gradient(170deg, #1a1528 0%, #0f0d18 100%);
    border: 2px solid #d4a853;
    display: flex; flex-direction: column;
    box-shadow: inset 0 0 40px rgba(107,63,160,0.1), 0 4px 20px rgba(0,0,0,0.4), 0 0 30px rgba(212,168,83,0.1);
    backface-visibility: hidden;
}
/* Hi-res front: no flip, full size, visible */
.card-hi > .oracle-card-face.oracle-card-front {
    transform: none; position: relative; width: 100%; height: 100%;
    backface-visibility: visible;
}
.oracle-card-front::before {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid rgba(212,168,83,0.2); pointer-events: none;
}
.oracle-card-numeral {
    text-align: left; padding: 10px 8px 4px; font-size: 6px;
    color: #8a6d2b; letter-spacing: 2px; text-transform: uppercase;
    font-family: 'Press Start 2P', cursive;
}
.oracle-card-stripe {
    height: 3px; background: linear-gradient(90deg, transparent, var(--card-accent, #d4a853), transparent);
    opacity: 0.6;
}
.oracle-card-art {
    height: 86px; margin: 4px 10px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; flex-shrink: 0;
}
.oracle-card-art-icon {
    font-size: 52px; position: relative; z-index: 2; top: -4px;
    filter: drop-shadow(0 0 12px var(--card-glow, rgba(107,63,160,0.4)));
}
.oracle-card-art::before {
    content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, var(--card-glow, rgba(107,63,160,0.15)) 0%, transparent 70%);
    z-index: 1;
}
.oracle-card-art::after {
    content: ''; position: absolute; inset: 0;
    background-image: url('/static/images/backgrounds/Stars.png');
    background-repeat: repeat;
    background-size: 128px;
    opacity: 0.35;
}
.oracle-card-title {
    text-align: center; padding: 6px 10px; font-size: 7px;
    color: #f0c674; line-height: 1.6; border-top: 1px solid rgba(212,168,83,0.15);
    font-family: 'Press Start 2P', cursive;
}
.oracle-card-prophecy {
    padding: 6px 10px 12px; font-size: 8px; color: #7a7588;
    line-height: 1.8; text-align: center; font-style: italic;
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-family: 'Press Start 2P', cursive; overflow: hidden;
}
/* Cosmic Snapshot card (Card 1 — pure lookup data) */
.oracle-cosmic-grid {
    padding: 4px 8px; display: flex; flex-direction: column; gap: 3px;
}
.oracle-cosmic-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2px 4px; border-bottom: 1px solid rgba(212,168,83,0.08);
}
.oracle-cosmic-label {
    font-family: 'Press Start 2P', cursive; font-size: 5px; color: #7a7588;
    white-space: nowrap;
}
.oracle-cosmic-value {
    font-family: 'Press Start 2P', cursive; font-size: 5px; color: #c9b8e8;
    text-align: right;
}
.oracle-cosmic-timer {
    font-size: 5px; color: #d4a853; margin-left: 4px;
    letter-spacing: 0;
}
/* Identity card (Card 1) */
.id-element-line {
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    letter-spacing: 1px;
    padding: 2px 0 4px;
    flex-shrink: 0;
}
.id-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 8px 4px;
    gap: 2px;
    border-top: 1px solid rgba(212,168,83,0.1);
    overflow: hidden;
}
.id-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.id-row:last-child { border-bottom: none; }
.id-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: #7a7588;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.id-value {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: #c9b8e8;
    text-align: right;
    letter-spacing: 0.5px;
}
.id-value.gold { color: #f0c674; }
.id-value.moon { color: #a0c0e8; }
.id-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 6px;
    border-top: 1px solid rgba(212,168,83,0.1);
    flex-shrink: 0;
}
.id-footer-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: #7a7588;
}
/* Moon card */
.moon-element-meaning {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px; color: #c9b8e8; font-style: italic;
    text-align: center; padding: 3px 8px; line-height: 1.8;
}
.moon-keywords {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px; color: #8a6d2b;
    text-align: center; padding: 2px 8px 4px;
}
.moon-phase-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 8px;
    font-family: 'Press Start 2P', cursive; font-size: 5px;
}
.moon-phase-name { color: #c9b8e8; }
.moon-phase-pct { color: #d4a853; }
.moon-influence {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px; color: #c9b8e8; font-style: italic;
    text-align: center; padding: 3px 8px 8px; line-height: 1.8;
}
/* Compatibility card */
.compat-moon-context {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px; color: #7a7588;
    text-align: center; padding: 2px 0;
}
.compat-grid {
    padding: 4px 8px; display: flex; flex-direction: column; gap: 4px;
}
.compat-row {
    display: flex; align-items: center; gap: 4px;
}
.compat-row-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 6px; width: 36px; flex-shrink: 0;
}
.compat-signs {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.compat-sign {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.compat-sign-glyph {
    font-family: 'Press Start 2P', cursive; font-size: 14px;
}
.compat-sign-name {
    font-family: 'Press Start 2P', cursive; font-size: 5px; color: #7a7588;
}
/* Lucky card */
.lucky-art {
    flex-direction: column; gap: 2px;
}
.lucky-art-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px; color: #8a6d2b; letter-spacing: 2px;
}
.lucky-art-number {
    font-family: 'Press Start 2P', cursive;
    font-size: 36px; color: #f0c674;
    text-shadow: 0 0 12px rgba(212,168,83,0.4);
}
.lucky-phrase {
    font-family: 'Press Start 2P', cursive;
    font-size: 6px; color: #a090c0; font-style: italic;
    text-align: center; padding: 4px 8px 2px; line-height: 1.8;
}
/* Weather card uses same layout as identity card — no custom overrides needed */
/* Transit card bottom section */
.oracle-card-bottom {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 4px 8px 8px; margin-top: auto; gap: 2px;
}
.oracle-card-bottom .oracle-bottom-top {
    display: flex; justify-content: space-between; align-items: flex-end;
}
.oracle-planet-block {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.oracle-planet-label {
    font-family: 'Press Start 2P', cursive; font-size: 5px; color: #8a6d2b; text-align: center;
}
.oracle-card-intensity {
    width: 100%;
}
.intensity-label {
    font-family: 'Press Start 2P', cursive; font-size: 5px; color: #8a6d2b;
    align-self: flex-end; margin-bottom: 1px;
}
.intensity-bar {
    background: #1a1a2e;
    height: 9px; width: 100%;
    border-style: solid; border-width: 2px;
    border-color: #0a0a18 #3a3a52 #3a3a52 #0a0a18;
    display: flex; gap: 1px;
    padding: 1px;
}
.i-seg {
    flex: 1;
    background: #2a2a42;
    border-style: solid; border-width: 1px;
    border-color: #1a1a32 #3a3a52 #3a3a52 #1a1a32;
}
.i-seg.lit.amber {
    background: #c07a10;
    border-color: #f0c860 #603800 #402000 #e0a830;
    box-shadow: 0 0 4px rgba(243,156,18,0.3);
    animation: xpEnergyWave 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}
.i-seg.lit.red {
    background: #a03010;
    border-color: #e06040 #601808 #401008 #c04828;
    box-shadow: 0 0 4px rgba(160,48,16,0.3);
    animation: intensityWaveRed 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}
.i-seg.lit.purple {
    background: #6b3fa0;
    border-color: #9b6fd0 #3b1f60 #2b1040 #8b5fc0;
    box-shadow: 0 0 4px rgba(107,63,160,0.3);
    animation: intensityWavePurple 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}
.i-seg.lit.teal {
    background: #0e6e5e;
    border-color: #3eae8e #064e3e #04362e #2e9e7e;
    box-shadow: 0 0 4px rgba(14,110,94,0.3);
    animation: intensityWaveTeal 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}
.i-seg.lit.blue {
    background: #1060a0;
    border-color: #4090d0 #083060 #062040 #3080c0;
    box-shadow: 0 0 4px rgba(16,96,160,0.3);
    animation: intensityWaveBlue 5s ease-in-out infinite;
    animation-delay: calc(var(--seg-i, 0) * 0.3s);
}
@keyframes intensityWaveRed {
    0%, 100% { background: #a03010; border-color: #e06040 #601808 #401008 #c04828; }
    50% { background: #c04020; border-color: #f07050 #802818 #601810 #d05838; }
}
@keyframes intensityWavePurple {
    0%, 100% { background: #6b3fa0; border-color: #9b6fd0 #3b1f60 #2b1040 #8b5fc0; }
    50% { background: #7b4fb0; border-color: #ab7fe0 #4b2f70 #3b2050 #9b6fd0; }
}
@keyframes intensityWaveTeal {
    0%, 100% { background: #0e6e5e; border-color: #3eae8e #064e3e #04362e #2e9e7e; }
    50% { background: #1e7e6e; border-color: #4ebe9e #0e5e4e #064e3e #3eae8e; }
}
@keyframes intensityWaveBlue {
    0%, 100% { background: #1060a0; border-color: #4090d0 #083060 #062040 #3080c0; }
    50% { background: #2070b0; border-color: #50a0e0 #104070 #083050 #4090d0; }
}
/* Card element themes */
.oracle-card[data-element="fire"], .card-wrap[data-element="fire"] { --card-glow: rgba(196,92,44,0.4); --card-accent: #c45c2c; }
.oracle-card[data-element="water"], .card-wrap[data-element="water"] { --card-glow: rgba(42,110,110,0.4); --card-accent: #2a6e6e; }
.oracle-card[data-element="earth"], .card-wrap[data-element="earth"] { --card-glow: rgba(139,34,82,0.3); --card-accent: #8b2252; }
.oracle-card[data-element="air"], .card-wrap[data-element="air"] { --card-glow: rgba(107,63,160,0.4); --card-accent: #6b3fa0; }
.oracle-card[data-element="spirit"], .card-wrap[data-element="spirit"] { --card-glow: rgba(212,168,83,0.4); --card-accent: #d4a853; }
/* Choices */
.oracle-choices {
    margin-top: 36px; display: flex; gap: 10px; align-items: stretch;
    justify-content: center;
    display: none;
}
.oracle-choices.visible { display: flex; }
.oracle-choice {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 14px 22px; cursor: pointer; letter-spacing: 1px;
    line-height: 1.8; transition: all 0.1s; text-align: center;
    border-style: solid; border-width: 3px;
    box-shadow: 2px 2px 0px #000;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.oracle-choice:active {
    transform: translate(2px, 2px); box-shadow: none;
}
.oracle-farewell {
    background: linear-gradient(180deg, #d4a853, #b8922e);
    border-color: #f0d080 #8a6d1a #6a5010 #c9a040;
    color: #fff;
}
.oracle-farewell:hover { background: #c49a40; }
.oracle-deeper {
    background: linear-gradient(180deg, #7b4fb8, #6b3fa0);
    border-color: #a070d0 #4a2878 #3a1c60 #8a5cc0;
    color: #ddd;
}
.oracle-deeper:hover { background: #6030a0; }
.oracle-choice-icon { display: inline; font-size: 12px; margin-right: 6px; }
.oracle-choice-divider { display: none; }
.oracle-exit-btn { display: none; }
@keyframes oracleFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Oracle empty/fatigue message */
.oracle-fatigue {
    text-align: center; padding: 30px 20px; font-family: 'Press Start 2P', cursive;
    font-size: 8px; color: #7a7588; line-height: 2.2; font-style: italic;
}
/* Oracle banner in unified modal */
.oracle-banner {
    background: linear-gradient(135deg, #1a1528, #12111a);
    border: 2px solid #6b3fa0; padding: 12px; text-align: center;
    margin-bottom: 10px;
}
.oracle-banner-emojis { font-size: 20px; }
.oracle-banner-text {
    font-size: 10px; color: #b48edd; font-family: 'Press Start 2P', cursive;
    margin-top: 6px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
/* Horoscope sign display in unified modal */
.horoscope-sign-display {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 14px; margin: 10px 0;
    border: 1px solid #2d1f4e;
}
.horoscope-sign-symbol { font-size: 32px; }
.horoscope-sign-info { text-align: left; }
.horoscope-sign-name {
    font-size: 11px; color: #d4a853; font-family: 'Press Start 2P', cursive;
    letter-spacing: 2px; margin-bottom: 4px;
}
.horoscope-sign-date {
    font-size: 7px; color: #7a7588; font-family: 'Press Start 2P', cursive;
}
.horoscope-no-birthday {
    text-align: center; padding: 14px; margin: 10px 0;
    font-size: 8px; color: #7a7588; font-family: 'Press Start 2P', cursive;
    border: 1px dashed #2d1f4e; line-height: 2.2;
}
.horoscope-no-birthday span { font-size: 24px; display: block; margin-bottom: 6px; }
/* Oracle mode tab bar (below the table surface) */
.oracle-mode-tabs {
    display: flex; gap: 6px; justify-content: center;
    margin: 20px auto 0; padding: 0 16px;
    opacity: 0; animation: oracleFadeIn 1.5s ease forwards 1s;
}
.oracle-mode-tab {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 10px 16px; cursor: pointer;
    background: #3a3a4a;
    border-style: solid; border-width: 3px;
    border-color: #6a6a7a #353540 #252530 #454555;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    color: #888; letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    touch-action: manipulation; user-select: none;
    transition: background 0.15s, color 0.15s;
}
.oracle-mode-tab:active {
    border-color: #252530 #454555 #6a6a7a #353540;
    box-shadow: none; transform: translate(2px, 2px);
}
.oracle-mode-tab.active {
    background: linear-gradient(180deg, #a866c0, #9b59b6, #8e4da8);
    border-color: #c888e0 #7a3996 #5a1976 #a859c6;
    color: #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(155,89,182,0.3);
}
/* Friend reading bar */
.friend-reading-bar {
    text-align: center; margin-bottom: 12px;
    opacity: 0; animation: oracleFadeIn 1.5s ease forwards 0.3s;
}
.friend-toggle-btn {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 8px 16px; cursor: pointer;
    background: #2a2a3a; color: #9b7ec8;
    border: 2px solid #4a3a6a;
    letter-spacing: 1px;
    touch-action: manipulation; user-select: none;
    transition: background 0.15s, color 0.15s;
}
.friend-toggle-btn:active {
    background: #3a2a5a; color: #c8a8f0;
}
.friend-active-indicator {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.friend-active-name {
    font-family: 'Press Start 2P', cursive; font-size: 9px;
    color: #e8c8ff; text-shadow: 0 0 8px rgba(155,89,182,0.5);
}
.friend-clear-btn {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 4px 8px; cursor: pointer;
    background: #4a2020; color: #e06060;
    border: 2px solid #6a3030;
    touch-action: manipulation; user-select: none;
}
.friend-clear-btn:active { background: #6a3030; }
.friend-reading-form {
    margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.friend-name-input {
    font-family: 'Press Start 2P', cursive; font-size: 10px;
    padding: 8px 12px; width: 200px; text-align: center;
    background: #1a1a2a; color: #e8d0ff;
    border: 2px solid #4a3a6a; outline: none;
}
.friend-name-input::placeholder { color: #5a4a6a; }
.friend-name-input:focus { border-color: #7a5aaa; }
.friend-date-row {
    display: flex; gap: 6px; justify-content: center;
}
.friend-sel {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 6px 4px; background: #1a1a2a; color: #c8b0e0;
    border: 2px solid #4a3a6a; outline: none;
    cursor: pointer;
}
.friend-sel:focus { border-color: #7a5aaa; }
.friend-sel-narrow { width: 60px; }
.friend-zip-input {
    font-family: 'Press Start 2P', cursive; font-size: 9px;
    padding: 7px 12px; width: 170px; text-align: center;
    background: #1a1a2a; color: #c8b0e0;
    border: 2px solid #4a3a6a; outline: none;
}
.friend-zip-input::placeholder { color: #5a4a6a; }
.friend-zip-input:focus { border-color: #7a5aaa; }
.friend-confirm-btn {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    padding: 8px 16px; cursor: pointer;
    background: linear-gradient(180deg, #6a3fa0, #5a2f90);
    color: #e8d0ff; border: 2px solid #8a5fc0;
    letter-spacing: 1px;
    touch-action: manipulation; user-select: none;
}
.friend-confirm-btn:active {
    background: linear-gradient(180deg, #5a2f90, #4a1f80);
}

/* Prophecy reading container */
.oracle-prophecy-reading {
    display: none; width: 100%; max-width: 480px;
    margin: 0 auto; padding: 8px 4px 16px;
    animation: oracleFadeIn 0.6s ease forwards;
}
.oracle-prophecy-reading.active { display: block; }
.prophecy-loading {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 40px 20px;
}
.prophecy-loading-sigil {
    font-size: 24px; color: #d4a853;
    animation: oracleSigilPulse 2s ease-in-out infinite;
}
.prophecy-loading-text {
    font-family: 'Press Start 2P', cursive; font-size: 7px;
    color: #7a7588; letter-spacing: 1px; text-align: center; line-height: 2;
}
.prophecy-content {
    display: flex; flex-direction: column; gap: 0;
    padding: 8px 4px;
}
.prophecy-reading-text {
    font-family: 'Press Start 2P', cursive; font-size: 9px;
    color: #f0c674; line-height: 2.6; letter-spacing: 0.3px;
    text-align: center; padding: 4px 8px;
    transition: opacity 0.4s ease;
}
.prophecy-reading-text.fade-out { opacity: 0; }
.prophecy-long-text {
    font-size: 10px;
    color: #c9b8e8;
    line-height: 2.4;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease 0.2s, max-height 0.5s ease;
}
.prophecy-long-text.open {
    opacity: 1;
    max-height: 800px;
}
/* prophecy expand handled by Peer Deeper button now */
.task[data-task-type="oracle"] { border-color: #6b3fa0 !important; }
.task[data-task-type="oracle"] .task-name-text { color: #b48edd; }
.task[data-task-type="horoscope"] { border-color: #6b3fa0 !important; }
.task[data-task-type="horoscope"] .task-name-text { color: #b48edd; }
.task[data-task-type="prophecy"] { border-color: #6b3fa0 !important; }
.task[data-task-type="prophecy"] .task-name-text { color: #b48edd; }
.modal-content.unified-modal.oracle-modal {
    border-color: #6b3fa0; box-shadow: 0 0 20px rgba(107,63,160,0.3);
}
/* Player Profile Modal */
.player-modal.active { z-index: 1002; display: flex; align-items: center; justify-content: center; }
.player-modal-content {
    background: linear-gradient(170deg, #1a1528 0%, #0f0d18 100%);
    border: 2px solid #d4a853; max-width: 380px; width: calc(100% - 32px);
    padding: 24px 20px; text-align: center;
}
.player-modal-header { margin-bottom: 16px; }
.player-modal-title {
    font-family: 'Press Start 2P', cursive; font-size: 11px;
    color: #f0c674; letter-spacing: 2px; margin: 0;
}
.player-modal-sub {
    font-family: 'Press Start 2P', cursive; font-size: 6px;
    color: #7a7588; margin: 8px 0 0; letter-spacing: 1px;
}
.player-field { margin-bottom: 12px; text-align: left; }
.player-label {
    font-family: 'Press Start 2P', cursive; font-size: 6px;
    color: #8a6d2b; letter-spacing: 1px; display: block; margin-bottom: 5px;
}
.player-optional { color: #5a5068; }
.player-input {
    background: rgba(255,255,255,0.05); border: 1px solid #3a2060;
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    color: #eee; padding: 8px 10px; width: 100%; box-sizing: border-box;
    outline: none; letter-spacing: 1px;
}
.player-input:focus { border-color: #d4a853; }
.player-input::placeholder { color: #5a5068; font-size: 7px; }
.player-input-sm { width: 52px; text-align: center; }
.player-input-md { width: 72px; text-align: center; }
.player-birth-row { display: flex; align-items: center; gap: 4px; }
.player-sep {
    font-family: 'Press Start 2P', cursive; font-size: 8px; color: #5a5068;
}
.player-save-btn {
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    color: #f0c674; background: linear-gradient(180deg, #3a2060, #2a1548);
    border: 3px solid; border-color: #5a3888 #1e0e30 #160a28 #4a2878;
    padding: 12px 24px; cursor: pointer; margin-top: 8px;
    box-shadow: 2px 2px 0px #000; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    letter-spacing: 1px; width: 100%;
}
.player-save-btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* Birthday input modal */
.oracle-birthday-modal.active { z-index: 1002; }
.oracle-birthday-modal.active {
    display: flex; align-items: center; justify-content: center;
}
.oracle-birthday-modal .oracle-birthday-content {
    background: linear-gradient(170deg, #1a1528 0%, #0f0d18 100%);
    border: 2px solid #6b3fa0; max-width: 420px; width: calc(100% - 32px);
    padding: 28px 16px; box-sizing: border-box;
}
.oracle-birthday-header { text-align: center; margin-bottom: 24px; }
.oracle-birthday-title {
    font-size: 12px; color: #d4a853; letter-spacing: 3px; text-transform: uppercase;
    font-family: 'Press Start 2P', cursive; margin-bottom: 8px;
}
.oracle-birthday-sub {
    font-size: 7px; color: #7a7588; letter-spacing: 2px;
    font-family: 'Press Start 2P', cursive;
}
/* Birthday reel columns */
.birth-reel-box { margin-bottom: 10px; }
.birth-reel-box .reel-col-bmo { padding-left: 94px; width: 156px; border-right: 1px solid rgba(64,64,80,0.4); }
.birth-reel-box .reel-col-bday { width: 46px; border-right: 1px solid rgba(64,64,80,0.4); }
.birth-reel-box .reel-col-byr { flex: 1; min-width: 0; }
.birth-reel-box .reel-col-bhr { padding-left: 94px; width: 140px; border-right: 1px solid rgba(64,64,80,0.4); }
.birth-reel-box .reel-col-bmin { width: 46px; border-right: 1px solid rgba(64,64,80,0.4); }
.birth-reel-box .reel-col-bampm { flex: 1; min-width: 0; }
.birth-reel-colon {
    display: flex; align-items: center; justify-content: center;
    width: 10px; flex-shrink: 0; color: #f9e076; font-size: 10px;
    font-family: 'Press Start 2P', cursive; text-shadow: 0 0 8px rgba(243,156,18,0.3);
    z-index: 3;
}
/* Optional label */
.birth-optional-label {
    text-align: center; font-family: 'Press Start 2P', cursive;
    font-size: 6px; color: #5a5068; letter-spacing: 2px;
    margin: 6px 0 4px; text-transform: uppercase;
}
/* Zipcode input */
.birth-zip-box {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 16px; margin-bottom: 14px;
}
.birth-zip-input {
    background: transparent; border: none; outline: none;
    font-family: 'Press Start 2P', cursive; font-size: 9px;
    color: #eee; text-align: center; width: 100%;
    letter-spacing: 2px;
}
.birth-zip-input::placeholder {
    color: #5a5068; font-size: 9px;
}
.oracle-birthday-confirm {
    display: block; margin: 0 auto; background: #6b3fa0;
    border-style: solid; border-width: 3px;
    border-color: rgba(255,255,255,0.3) rgba(0,0,0,0.3) rgba(0,0,0,0.4) rgba(255,255,255,0.2);
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 9px;
    padding: 12px 24px; cursor: pointer; letter-spacing: 2px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 3px 3px 0px #000; transition: all 0.1s;
}
.oracle-birthday-confirm:hover {
    transform: translate(1px, 1px); box-shadow: 2px 2px 0px #000;
}
.oracle-birthday-confirm:active {
    transform: translate(2px, 2px); box-shadow: none;
}
/* Horoscope sign card */
.oracle-sign-card {
    text-align: center; padding: 20px; margin-bottom: 12px;
    border: 1px solid #2d1f4e;
}
.oracle-sign-symbol { font-size: 40px; margin-bottom: 8px; }
.oracle-sign-name {
    font-size: 11px; color: #d4a853; font-family: 'Press Start 2P', cursive;
    letter-spacing: 3px; margin-bottom: 6px;
}
.oracle-sign-details {
    font-size: 7px; color: #7a7588; font-family: 'Press Start 2P', cursive;
    line-height: 2;
}
/* (lucky number/color moved to deterministic lucky card in horoscope-engine.js) */
.oracle-card-date {
    font-size: 8px; color: #7a7588; text-align: center;
    font-family: 'Press Start 2P', cursive; line-height: 1.8;
    padding: 2px 8px;
}
.oracle-date-overdue {
    color: #e74c3c; text-shadow: 0 0 6px rgba(231,76,60,0.6);
}
.oracle-card-branch-tag {
    font-size: 8px; padding: 1px 8px 4px; letter-spacing: 1px;
    font-family: 'Press Start 2P', cursive; opacity: 0.9;
    text-align: center; border-top: 1px solid rgba(212,168,83,0.1);
    position: relative; top: -3px;
}
.oracle-branch-icon {
    position: relative; top: -1px;
}
/* Oracle responsive */
@media (max-width: 960px) {
    .oracle-cards-spread { gap: 14px; }
}
@media (max-width: 700px) {
    .oracle-title { font-size: 10px; letter-spacing: 3px; }
    .oracle-cards-spread { gap: 10px; }
    .oracle-table-surface { padding: 30px 12px 40px; }
    .oracle-choices { gap: 8px; }
    .oracle-choice { font-size: 7px; padding: 12px 16px; }
}

/* ============================
   MAIN PAGE RESPONSIVE — PHONES
   ============================ */
@media (max-width: 480px) {
    .branch-header h2 { font-size: 10px; }
    .task-name { font-size: 8px; }
    .streak-info { font-size: 8px; }
    .branch { border-width: 3px; }
    .modal-content { margin: 8px; border-width: 3px; }
    .modal-header { padding: 10px; }
    .modal-body { padding: 12px; }
    .dev-tools { font-size: 8px; padding: 10px; }
}