.jsc{box-sizing:border-box;max-width:1050px;margin:2rem auto;padding:clamp(1.2rem,4vw,3rem);border:1px solid #54506a;border-radius:26px;background:radial-gradient(circle at 95% 0%,#363347,#171923 60%);color:#f7f3ef;font-family:inherit;box-shadow:0 18px 55px #0005}.jsc *{box-sizing:border-box}.jsc-intro{text-align:center;max-width:650px;margin:auto}.jsc .jsc-eyebrow{color:#dcbcca;text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;margin:0}.jsc h2{color:#fff;font-size:clamp(2rem,5vw,3rem);margin:.3em 0}.jsc-intro p:last-child{color:#e6dfe7;font-size:1.08rem;line-height:1.6}.jsc h3{color:#fff;text-align:center;font-size:1.25rem;margin:1.6rem 0 1rem}.jsc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:13px}.jsc button{font:inherit;cursor:pointer}.jsc-card{min-height:105px;padding:1rem;border:2px solid transparent;border-radius:19px;background:var(--card-color);color:#252333;font-weight:700;font-size:1.13rem;box-shadow:0 7px 0 #0003;transition:transform .18s,box-shadow .18s}.jsc-card:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 11px 18px #0005}.jsc-card:focus-visible,.jsc-control:focus-visible,.jsc-crumb:focus-visible{outline:3px solid #fff;outline-offset:3px}.jsc-progress{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0;color:#f5dde4}.jsc-crumb,.jsc-control{border:1px solid #ad9baa;border-radius:999px;background:#322d3c;color:#fff;padding:.5rem .85rem}.jsc-crumb:hover,.jsc-control:hover{background:#504359}.jsc-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}.jsc-result{max-width:590px;margin:1.5rem auto 0;padding:2rem;text-align:center;border-radius:20px;background:var(--card-color);color:#272336}.jsc-result p{margin:.5rem 0}.jsc-result strong{display:block;font-size:clamp(1.8rem,5vw,2.7rem)}@media(max-width:600px){.jsc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jsc-card{min-height:84px;font-size:1rem;padding:.7rem}}@media(max-width:380px){.jsc-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.jsc-card{transition:none}}

/* Atmosféra se mění s první vybranou emocí. Všechny barvy zůstávají čitelné na tmavém webu. */
.jsc[data-mood="0"]{--mood-glow:#827033;--mood-edge:#c39e53}
.jsc[data-mood="1"]{--mood-glow:#8f303a;--mood-edge:#d76569}
.jsc[data-mood="2"]{--mood-glow:#585367;--mood-edge:#9892ad}
.jsc[data-mood="3"]{--mood-glow:#275b7d;--mood-edge:#689fc3}
.jsc[data-mood="4"]{--mood-glow:#786725;--mood-edge:#d0b75b}
.jsc[data-mood="5"]{--mood-glow:#66517e;--mood-edge:#b19ac9}
.jsc[data-mood="6"]{--mood-glow:#326a6a;--mood-edge:#77b6ae}
.jsc[data-mood]:not([data-mood="none"]){background:radial-gradient(ellipse at 75% 8%,var(--mood-glow),#22212d 52%,#151720 100%);border-color:var(--mood-edge);transition:background .35s,border-color .35s}
.jsc .jsc-intro{max-width:780px}
.jsc .jsc-intro p:last-child{font-size:clamp(17px,2vw,20px)!important;line-height:1.6!important}
.jsc .jsc-eyebrow{font-size:14px!important}
.jsc .jsc-stage h3{font-size:clamp(21px,2.5vw,26px)!important}
.jsc .jsc-card{min-height:120px;font-size:clamp(19px,2vw,23px)!important;line-height:1.25!important;border:2px solid #ffffff55;box-shadow:0 9px 0 #0007,0 16px 25px #0005;background:linear-gradient(145deg,#ffffff40,transparent 60%),var(--card-color);color:#24202c!important;text-shadow:none}
.jsc .jsc-crumb,.jsc .jsc-control{font-size:17px!important;line-height:1.3!important}
.jsc .jsc-result{max-width:650px;background:linear-gradient(125deg,#282330,#171923);border:2px solid var(--mood-edge,#b7a5b3);box-shadow:0 0 35px color-mix(in srgb,var(--mood-glow,#5a4e67),transparent 48%),0 14px 25px #0006;color:#fff;padding:2.2rem}
.jsc .jsc-result p{font-size:19px!important;color:#f0eaf0!important}
.jsc .jsc-result strong{color:var(--card-color)!important;font-size:clamp(30px,5vw,48px)!important;line-height:1.2!important}
@media(max-width:600px){.jsc .jsc-card{min-height:94px;font-size:18px!important}}
.jsc .jsc-suggestion{max-width:650px;margin:1rem auto 0;padding:1.1rem 1.5rem;border-left:3px solid var(--mood-edge,#b7a5b3);border-radius:0 12px 12px 0;background:#11131ba8;color:#fff}
.jsc .jsc-suggestion p{margin:0;font-size:clamp(18px,2vw,21px)!important;line-height:1.5!important;color:#fff!important}
.jsc .jsc-suggestion a{display:inline-block;margin-top:.85rem;color:#fff!important;font-size:17px!important;line-height:1.3!important;text-decoration:underline;text-underline-offset:3px}
.jsc .jsc-suggestion a:hover{color:var(--card-color,#fff)!important}
.jsc .jsc-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin:1.2rem auto}
.jsc .jsc-body-tip{max-width:730px;margin:1rem auto;text-align:center;color:#eae6ec!important;font-size:clamp(17px,2vw,20px)!important;line-height:1.5!important}
.jsc .jsc-tree-branch{margin:.7rem 0;border:1px solid #ffffff55;border-radius:14px;background:#141723b5;overflow:hidden}
.jsc .jsc-tree-branch summary{padding:.9rem 1.1rem;background:linear-gradient(90deg,var(--card-color),#272735);color:#1c1b26;cursor:pointer;font-size:21px;font-weight:700}
.jsc .jsc-tree-row{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;padding:.8rem 1rem;border-top:1px solid #ffffff29}
.jsc .jsc-tree-row strong{min-width:150px;font-size:18px;color:#fff}
.jsc .jsc-tree-word{padding:.45rem .75rem;border:1px solid #a8a3b4;border-radius:999px;background:#292c3a;color:#fff;font-size:17px!important}
.jsc .jsc-tree-word:hover{background:#484c60}
.jsc .jsc-save{max-width:650px;margin:1.2rem auto;padding:1.2rem;border:1px solid #ffffff55;border-radius:15px;background:#1b1c29}
.jsc .jsc-save label{display:block;color:#fff;font-size:18px!important;line-height:1.5!important}
.jsc .jsc-save textarea{display:block;box-sizing:border-box;width:100%;min-height:95px;margin:.8rem 0;padding:.8rem;border:1px solid #aaa;border-radius:9px;background:#faf9f6;color:#171923;font:inherit;font-size:18px!important}
.jsc .jsc-save-button{padding:.7rem 1.1rem;border:0;border-radius:10px;background:var(--card-color,#f4d8a5);color:#20202a;font-size:18px!important;font-weight:700}
.jsc .jsc-save-button:disabled{opacity:.6;cursor:wait}
.jsc .jsc-journal{max-width:650px;margin:1rem auto}.jsc .jsc-journal h3{font-size:23px!important;color:#fff!important}
.jsc .jsc-status{padding:.8rem;color:#fff!important;font-size:18px!important;text-align:center}
.jsc .jsc-entry{display:grid;gap:.5rem;margin:.7rem 0;padding:1rem;border:1px solid #ffffff45;border-radius:12px;background:#171923;color:#fff;font-size:17px}
.jsc .jsc-entry time{color:#d5cbd4}.jsc .jsc-entry strong{font-size:19px}.jsc .jsc-entry p{margin:0;color:#fff!important;font-size:17px!important;white-space:pre-wrap}
.jsc .jsc-delete{justify-self:start;border:1px solid #d8b7bf;border-radius:8px;padding:.4rem .7rem;background:transparent;color:#fff;font-size:16px!important}
.jsc .jsc-save-button:focus-visible,.jsc .jsc-tree-word:focus-visible,.jsc .jsc-delete:focus-visible{outline:3px solid #fff;outline-offset:2px}
.jsc .jsc-suggest-panel{max-width:650px;margin:2rem auto 0;padding:1.1rem 1.4rem;border:1px solid #a39aab;border-radius:16px;background:#171923;color:#fff}
.jsc .jsc-suggest-panel summary{cursor:pointer;font-size:21px!important;font-weight:700}
.jsc .jsc-suggest-panel p{font-size:18px!important;line-height:1.5!important;color:#f1edf2!important}
.jsc .jsc-suggest-panel label{display:block;margin:.9rem 0;font-size:17px!important;color:#fff}
.jsc .jsc-suggest-panel label[hidden]{display:none!important}
.jsc .jsc-suggest-panel input,.jsc .jsc-suggest-panel select,.jsc .jsc-suggest-panel textarea{display:block;box-sizing:border-box;width:100%;margin:.4rem 0;padding:.7rem;border:1px solid #aaa;border-radius:8px;background:#faf9f6;color:#20202a;font:inherit;font-size:17px!important}
.jsc .jsc-suggest-panel .jsc-honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}

/* Jemnější měřítko a přehled emocí jako otevřené pastelové listy. */
.jsc .jsc-intro p:last-child{font-size:17px!important}
.jsc .jsc-stage h3{font-size:22px!important}
.jsc .jsc-body-tip{font-size:17px!important}
.jsc .jsc-card{font-size:19px!important;min-height:102px}
.jsc .jsc-crumb,.jsc .jsc-control{font-size:16px!important}
.jsc .jsc-result strong{font-size:clamp(29px,4vw,41px)!important}
.jsc .jsc-result p,.jsc .jsc-suggestion p{font-size:17px!important}
.jsc .jsc-suggestion a{font-size:16px!important}
.jsc .jsc-tree-branch{border:0;border-radius:18px;background:color-mix(in srgb,var(--card-color) 32%,#f6f0f2);box-shadow:0 8px 18px #0003;color:#24202c}
.jsc .jsc-tree-branch summary{background:linear-gradient(110deg,var(--card-color),color-mix(in srgb,var(--card-color) 28%,#fff));padding:.85rem 1.2rem;font-size:19px!important}
.jsc .jsc-tree-row{border:0;border-bottom:1px solid #413b4525;padding:.75rem 1.2rem}
.jsc .jsc-tree-row:last-child{border-bottom:0}
.jsc .jsc-tree-row strong{min-width:170px;color:#292331;font-size:17px!important}
.jsc .jsc-tree-word{border:0;background:#fff9;color:#282530;font-size:16px!important;box-shadow:0 2px 5px #2a223526}
.jsc .jsc-tree-word:hover{background:#fff;color:#1d1924}
.jsc .jsc-tree-back{display:block;margin:1.4rem auto 0}
.jsc .jsc-journal{scroll-margin-top:90px}.jsc .jsc-stage{scroll-margin-top:90px}
.jsc .jsc-save-info{max-width:650px;margin:1.1rem auto;color:#eee9f0!important;font-size:17px!important;line-height:1.5!important}
.jsc .jsc-save-info a{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.jsc .jsc-card{font-size:17px!important;min-height:88px}.jsc .jsc-tree-row strong{min-width:100%;margin-bottom:.1rem}}

/* Sedm výrazů jedné bezvlasé figury; zdroj je průhledný list ilustrací. */
.jsc[data-step="0"] .jsc-root-card{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;isolation:isolate;min-height:165px;padding:.75rem}
.jsc[data-step="0"] .jsc-root-card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url('./emotions-sheet.png');background-repeat:no-repeat;background-size:400% auto;background-position:0% 0%;opacity:.68;pointer-events:none}
.jsc .jsc-root-card span{position:relative;display:block;padding:.25rem .65rem;border-radius:9px;background:#fff9;color:#211e29;box-shadow:0 2px 9px #0003}
.jsc .jsc-root-card-0::before{background-position:0% 0%!important}
.jsc .jsc-root-card-1::before{background-position:33.333% 0%!important}
.jsc .jsc-root-card-2::before{background-position:66.666% 0%!important}
.jsc .jsc-root-card-3::before{background-position:100% 0%!important}
.jsc .jsc-root-card-4::before{background-size:300% auto!important;background-position:0% 100%!important}
.jsc .jsc-root-card-5::before{background-size:300% auto!important;background-position:50% 100%!important}
.jsc .jsc-root-card-6::before{background-size:300% auto!important;background-position:100% 100%!important}
@media(max-width:600px){.jsc[data-step="0"] .jsc-root-card{min-height:145px}}