/* Decorative chibi layer. It sits behind every card, ignores the mouse and only
   appears where the viewport leaves free margins, so the app layout never moves. */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:block}
main,.auth-page>*:not(.decor){position:relative;z-index:1}
.decor-item{position:absolute;display:block;opacity:.85}
.decor-item .fur{fill:var(--soft);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.decor-item .ear{fill:var(--soft);stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.decor-item .muzzle{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.decor-item .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.decor-item .nose{fill:var(--accent);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.decor-item .blush{fill:var(--negative);opacity:.35}
.decor-item .blush-soft{fill:var(--negative);opacity:.22}
.decor-item .paw{fill:var(--accent);opacity:.28}
.decor-item .spark{fill:var(--accent);opacity:.5;animation:decor-twinkle 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.decor-item .spark.heart{fill:var(--negative)}
.decor-cat{width:132px;right:2.5vw;bottom:-8px}
.decor-bunny{width:132px;left:2.5vw;bottom:-8px}
.decor-bear{width:112px;right:11vw;bottom:-12px;opacity:.75}
.decor-paws-a{width:110px;left:1vw;top:30vh;opacity:.7}
.decor-paws-b{width:110px;right:1vw;top:52vh;opacity:.7}
.decor-sparks{width:240px;left:3vw;top:4px;opacity:1}
@keyframes decor-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes decor-peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.decor-cat .peek,.decor-bunny .peek,.decor-bear .peek{animation:decor-peek 6s ease-in-out infinite}
.decor-bunny .peek{animation-delay:-2s}.decor-bear .peek{animation-delay:-4s}
@media(prefers-reduced-motion:reduce){.decor-item .spark,.decor-item .peek{animation:none}}
@media print{.decor{display:none}}

/* Chibi coin-jar strip below the active operation card */
.chibi-jar{
    --s:1;
    --pot-right:18px;
    --pot-w:calc(100px*var(--s));
    --pot-h:calc(58px*var(--s));
    --walker-w:calc(88px*var(--s));
    --walker-h:calc(58px*var(--s));
    --work-left:calc(100% - var(--pot-right) - var(--pot-w)/2 - 92px*var(--s));
    --chibi-fur:#efbc95;
    --chibi-fur-shade:#e6a37c;
    --chibi-belly:#fff4df;
    --chibi-ear-inner:#eaa4ae;
    --chibi-outline:#655472;
    --chibi-scarf:#a581c4;
    --chibi-blush:#ed96aa;
    --jar-glass:#eee8f499;
    --jar-rim:#dfd4ec;
    --jar-stroke:#72519a;
    --jar-shine:#ffffffbf;
    --coin-fill:#f6c445;
    --coin-inner:#ffe07d;
    --coin-edge:#b7791f;
    --sweat-fill:#63b3ed;
    position:relative;
    height:calc(60px*var(--s));
    margin:0 0 14px;
    border-radius:16px;
    border:1px solid var(--border);
    background:linear-gradient(180deg,var(--surface),var(--stripe));
    box-shadow:var(--shadow);
    overflow:hidden;
    pointer-events:none;
    user-select:none;
}
:root[data-theme=dark] .chibi-jar{
    --chibi-fur:#d9b8e6;
    --chibi-fur-shade:#b994cc;
    --chibi-belly:#f5ecfa;
    --chibi-ear-inner:#e7a5bc;
    --chibi-outline:#433554;
    --chibi-scarf:#83bbae;
    --chibi-blush:#f09cb0;
    --jar-glass:#2b2d40b8;
    --jar-rim:#3d3554;
    --jar-stroke:#c5a6e6;
    --jar-shine:#ffffff45;
    --coin-fill:#ffd15c;
    --coin-inner:#ffea9f;
    --coin-edge:#c98a1c;
    --sweat-fill:#7cc4fa;
}
.chibi-jar[data-mood=positive]{border-color:color-mix(in srgb,var(--positive) 45%,var(--border))}
.chibi-jar[data-mood=negative]{border-color:color-mix(in srgb,var(--negative) 45%,var(--border))}

.chibi-jar-track{position:relative;width:100%;height:100%}
.chibi-jar-track::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:5px;
    height:2px;
    border-radius:2px;
    background:repeating-linear-gradient(90deg,var(--border) 0 10px,transparent 10px 18px);
    opacity:.7;
}

/* The jar lives at the right end; the walker never crosses it. */
.chibi-jar-pot{
    position:absolute;
    right:var(--pot-right);
    bottom:1px;
    width:var(--pot-w);
    height:var(--pot-h);
    z-index:1;
}
.chibi-jar-svg,.chibi-walker-svg{width:100%;height:100%;display:block;overflow:visible}
.jar-shadow,.walker-shadow{fill:var(--accent);opacity:.14}
.jar-body{fill:var(--jar-glass);stroke:var(--jar-stroke);stroke-width:2;stroke-linejoin:round}
.jar-rim{fill:var(--jar-rim);stroke:var(--jar-stroke);stroke-width:2}
.jar-shine{fill:none;stroke:var(--jar-shine);stroke-width:2.4;stroke-linecap:round}
.chibi-coin .coin-outer{fill:var(--coin-fill);stroke:var(--coin-edge);stroke-width:1.4}
.chibi-coin .coin-inner{fill:var(--coin-inner)}
.chibi-coin .coin-mark{fill:none;stroke:var(--coin-edge);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.jar-coin{opacity:0;transition:opacity .45s ease}
.chibi-jar[data-coins="1"] .jar-coin.c1,
.chibi-jar[data-coins="2"] .jar-coin.c1,.chibi-jar[data-coins="2"] .jar-coin.c2,
.chibi-jar[data-coins="3"] .jar-coin.c1,.chibi-jar[data-coins="3"] .jar-coin.c2,.chibi-jar[data-coins="3"] .jar-coin.c3,
.chibi-jar[data-coins="4"] .jar-coin.c1,.chibi-jar[data-coins="4"] .jar-coin.c2,.chibi-jar[data-coins="4"] .jar-coin.c3,.chibi-jar[data-coins="4"] .jar-coin.c4,
.chibi-jar[data-coins="5"] .jar-coin.c1,.chibi-jar[data-coins="5"] .jar-coin.c2,.chibi-jar[data-coins="5"] .jar-coin.c3,.chibi-jar[data-coins="5"] .jar-coin.c4,.chibi-jar[data-coins="5"] .jar-coin.c5,
.chibi-jar[data-coins="6"] .jar-coin{opacity:1}

.jar-drops,.jar-tosses{opacity:0}
.chibi-jar[data-mood=positive] .jar-drops{opacity:1}
.chibi-jar[data-mood=negative] .jar-tosses{opacity:1}
.plus-spark{fill:none;stroke:var(--positive);stroke-width:2.2;stroke-linecap:round}
.chibi-jar[data-mood=positive] .coin-drop.d1{animation:chibi-coin-in-1 3s ease-in-out infinite}
.chibi-jar[data-mood=positive] .coin-drop.d2{animation:chibi-coin-in-2 3s ease-in-out 1.5s infinite}
.chibi-jar[data-mood=positive] .coin-drop.d3{animation:chibi-plus-float 3s ease-out .8s infinite}
.chibi-jar[data-mood=negative] .coin-toss.t1{animation:chibi-coin-out-left 3s cubic-bezier(.22,.68,.42,1) infinite}
.chibi-jar[data-mood=negative] .coin-toss.t2{animation:chibi-coin-out-right 3s cubic-bezier(.22,.68,.42,1) .75s infinite}
.chibi-jar[data-mood=negative] .coin-toss.t3{animation:chibi-coin-out-far-left 3s cubic-bezier(.22,.68,.42,1) 1.5s infinite}
.chibi-jar[data-mood=negative] .coin-toss.t4{animation:chibi-coin-out-far-right 3s cubic-bezier(.22,.68,.42,1) 2.25s infinite}

/* Idle: walks at constant speed along the strip and turns around at both ends.
   Positive/negative: stands still beside the jar and handles the coins. */
.chibi-walker{
    position:absolute;
    bottom:1px;
    left:8px;
    width:var(--walker-w);
    height:var(--walker-h);
    z-index:2;
    animation:chibi-roam 70s linear infinite;
}
.chibi-walker-flip{
    width:100%;
    height:100%;
    transform-origin:center;
    animation:chibi-turn 70s linear infinite;
}
.chibi-jar[data-mood=positive] .chibi-walker,
.chibi-jar[data-mood=negative] .chibi-walker{
    left:var(--work-left);
    animation:none;
}
.chibi-jar[data-mood=positive] .chibi-walker-flip,
.chibi-jar[data-mood=negative] .chibi-walker-flip{
    animation:none;
    transform:none;
}
/* A brief fade hides the jump when the result changes sign (class set by decor.js). */
.chibi-jar.mood-change[data-mood=idle] .chibi-walker{animation:chibi-fade-in .7s ease-out,chibi-roam 70s linear infinite}
.chibi-jar.mood-change[data-mood=positive] .chibi-walker,.chibi-jar.mood-change[data-mood=negative] .chibi-walker{animation:chibi-fade-in .7s ease-out}

/* Feet and body only move while walking; at the jar the walker stands calmly. */
.chibi-step{transform-origin:44px 50px}
.chibi-jar[data-mood=idle] .chibi-step,.chibi-jar:not([data-mood]) .chibi-step{animation:chibi-hop .9s ease-in-out infinite}
.chibi-jar[data-mood=positive] .chibi-step,.chibi-jar[data-mood=negative] .chibi-step{animation:chibi-breathe 4s ease-in-out infinite}
.chibi-leg{fill:none;stroke:var(--chibi-outline);stroke-width:2.4;stroke-linecap:round}
.chibi-jar[data-mood=idle] .chibi-leg.leg-a,.chibi-jar:not([data-mood]) .chibi-leg.leg-a{transform-origin:35px 44px;animation:chibi-leg 1.8s ease-in-out infinite}
.chibi-jar[data-mood=idle] .chibi-leg.leg-b,.chibi-jar:not([data-mood]) .chibi-leg.leg-b{transform-origin:51px 44px;animation:chibi-leg 1.8s ease-in-out -.9s infinite}
.chibi-tail{fill:var(--chibi-fur-shade);stroke:var(--chibi-outline);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform-origin:25px 42px;animation:chibi-wag 3s ease-in-out infinite}
.chibi-tail-tip{fill:var(--chibi-belly)}
.chibi-body,.chibi-ear,.chibi-head{fill:var(--chibi-fur);stroke:var(--chibi-outline);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chibi-ear-inner{fill:var(--chibi-ear-inner)}
.chibi-cheeks-white{fill:var(--chibi-belly)}
.chibi-scarf{fill:none;stroke:var(--chibi-scarf);stroke-width:4.8;stroke-linecap:round}
.chibi-blush{fill:var(--chibi-blush);opacity:.85}
.chibi-nose,.chibi-eye{fill:var(--chibi-outline)}
.chibi-eye-arc,.chibi-mouth{fill:none;stroke:var(--chibi-outline);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chibi-mouth-happy{fill:var(--chibi-ear-inner);stroke:var(--chibi-outline);stroke-width:1.8;stroke-linejoin:round}
.happy-heart{fill:var(--positive);animation:chibi-heart-bob 2.4s ease-in-out infinite}
.sweat-drop{fill:var(--sweat-fill);animation:chibi-sweat 2.4s ease-in-out infinite}
.held-coin{animation:chibi-carry-coin 3s ease-in-out infinite}
.flung-coin{animation:chibi-paw-fling 3s ease-out infinite}

.mood-face{display:none}
.chibi-jar[data-mood=idle] .mood-idle,
.chibi-jar:not([data-mood]) .mood-idle{display:inline}
.chibi-jar[data-mood=positive] .mood-positive{display:inline}
.chibi-jar[data-mood=negative] .mood-negative{display:inline}

/* Constant-speed walk: left end -> work spot beside the jar -> back, turning smoothly at the ends. */
@keyframes chibi-roam{
    0%{left:8px}
    50%{left:var(--work-left)}
    100%{left:8px}
}
@keyframes chibi-turn{
    0%,48.5%{transform:scaleX(1)}
    50%{transform:scaleX(.05)}
    51.5%,98.5%{transform:scaleX(-1)}
    100%{transform:scaleX(1)}
}
@keyframes chibi-fade-in{from{opacity:0}to{opacity:1}}
@keyframes chibi-hop{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-1.5px)}
}
@keyframes chibi-breathe{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-1px)}
}
@keyframes chibi-leg{
    0%,100%{transform:rotate(-14deg)}
    50%{transform:rotate(14deg)}
}
@keyframes chibi-wag{
    0%,100%{transform:rotate(-4deg)}
    50%{transform:rotate(6deg)}
}
@keyframes chibi-coin-in-1{
    0%{transform:translate(42px,28px) scale(.75);opacity:0}
    20%{transform:translate(50px,14px) scale(1);opacity:1}
    55%{transform:translate(67px,4px) scale(1);opacity:1}
    85%{transform:translate(67px,32px) scale(.9);opacity:1}
    100%{transform:translate(67px,38px) scale(.7);opacity:0}
}
@keyframes chibi-coin-in-2{
    0%{transform:translate(42px,28px) scale(.75);opacity:0}
    20%{transform:translate(52px,12px) scale(1);opacity:1}
    55%{transform:translate(73px,4px) scale(1);opacity:1}
    85%{transform:translate(73px,32px) scale(.9);opacity:1}
    100%{transform:translate(73px,38px) scale(.7);opacity:0}
}
@keyframes chibi-plus-float{
    0%{transform:translate(70px,14px) scale(.6);opacity:0}
    40%{transform:translate(70px,5px) scale(1);opacity:1}
    100%{transform:translate(70px,-2px) scale(.85);opacity:0}
}
@keyframes chibi-coin-out-left{
    0%{transform:translate(67px,34px) rotate(0deg);opacity:0}
    25%{transform:translate(66px,10px) rotate(-60deg);opacity:1}
    65%{transform:translate(36px,18px) rotate(-180deg);opacity:1}
    100%{transform:translate(14px,48px) rotate(-260deg);opacity:0}
}
@keyframes chibi-coin-out-right{
    0%{transform:translate(73px,34px) rotate(0deg);opacity:0}
    25%{transform:translate(74px,10px) rotate(60deg);opacity:1}
    65%{transform:translate(104px,18px) rotate(180deg);opacity:1}
    100%{transform:translate(126px,48px) rotate(260deg);opacity:0}
}
@keyframes chibi-coin-out-far-left{
    0%{transform:translate(65px,32px) scale(.85);opacity:0}
    30%{transform:translate(56px,6px) scale(1);opacity:1}
    100%{transform:translate(4px,44px) scale(.75);opacity:0}
}
@keyframes chibi-coin-out-far-right{
    0%{transform:translate(75px,32px) scale(.85);opacity:0}
    30%{transform:translate(84px,6px) scale(1);opacity:1}
    100%{transform:translate(136px,44px) scale(.75);opacity:0}
}
@keyframes chibi-carry-coin{
    0%,100%{transform:translate(64px,36px) rotate(-8deg)}
    50%{transform:translate(67px,29px) rotate(12deg)}
}
@keyframes chibi-paw-fling{
    0%{transform:translate(61px,35px) scale(.85);opacity:1}
    60%{transform:translate(46px,18px) scale(1);opacity:1}
    100%{transform:translate(32px,38px) scale(.65);opacity:0}
}
@keyframes chibi-heart-bob{
    0%,100%{transform:translateY(0) scale(.95)}
    50%{transform:translateY(-3px) scale(1.1)}
}
@keyframes chibi-sweat{
    0%,100%{transform:translateY(0);opacity:.9}
    50%{transform:translateY(3px);opacity:.45}
}
@media(prefers-reduced-motion:reduce){
    .chibi-walker,.chibi-walker-flip,.chibi-step,.chibi-leg,.chibi-tail,.coin-drop,.coin-toss,.held-coin,.flung-coin,.happy-heart,.sweat-drop{animation:none!important}
    .jar-coin{transition:none!important}
    .chibi-walker{left:var(--work-left)}
}
@media print{.chibi-jar{display:none}}

/* Background accents in the toolbar above the chart. */
.decor-chart-sparks{display:none}
.trading-page .decor-chart-sparks{display:block;width:230px;height:60px;left:55%;top:65px;opacity:.9}
@media(max-width:760px){.trading-page .decor-chart-sparks{width:160px;height:48px;left:auto;right:12px;top:135px}}

/* Blinking chibi button (candles off / RDP only) */
.chibi-blink{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--accent);border-radius:20px;background:var(--soft);color:var(--accent);font-weight:700;animation:chibi-blink 1.8s ease-in-out infinite}
.chibi-blink-cat{display:inline-flex;width:22px;height:20px}.chibi-blink-cat svg{width:100%;height:100%}
.chibi-blink[aria-pressed=true]{background:var(--accent);color:var(--surface)}
@keyframes chibi-blink{
    0%,100%{opacity:.78;box-shadow:0 0 0 0 transparent}
    50%{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--negative) 30%,transparent),0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
}
@media(prefers-reduced-motion:reduce){.chibi-blink{animation:none}}