/* lumibot.si Batch 13: Accessory Wardrobe, Star Trails, The Everglow, buddy care extras, Cozy Lens, Topsy-Turvy, Challenge dial.
   Kid look = bright, rounded, huge buttons. Sleek look (html.lx-pg) = darker, flat, one accent, no emoji. */
.b13-sec { margin: 16px 0; }
.b13-sec h3, .b13-bd h3, .b13-lens h3 { margin: 14px 0 6px; font-size: 20px; }
.b13-list { margin: 8px 0 8px 22px; font-size: 18px; } .b13-list li { margin: 4px 0; }
.b13-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.b13-chip { min-height: 52px; padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
span.b13-chip { cursor: default; }
.b13-chip.on, .b13-chip[aria-pressed="true"] { background: #ffe27a; color: #2a1a00; border-color: #ffe27a; }
.b13-chip:disabled { opacity: .5; cursor: default; }
.b13-big { font-size: 64px; display: block; text-align: center; line-height: 1.1; }
.b13-reveal, .b13-pick, .b13-chpop { text-align: center; }
.b13-pick .b13-chips { justify-content: center; }
.b13-stamp { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #ffe27a; color: #2a1a00; font-weight: 800; font-size: 14px; }
.b13-new { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ff9de2; color: #2a0020; font-weight: 800; font-size: 13px; }
.b13-check { font-size: 16px; }
/* Wardrobe */
.b13-wtop { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 16px; align-items: center; }
@media (max-width: 640px) { .b13-wtop { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.b13-wprev { width: 100%; max-width: 260px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; background: radial-gradient(circle at 50% 40%, rgba(255,226,122,.25), rgba(20,14,50,.6)); }
.b13-wprev svg { width: 100%; height: auto; }
.b13-slots { flex-wrap: wrap; }
.b13-bands { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.b13-bands input[type=range] { width: min(320px, 100%); height: 44px; accent-color: #ffe27a; }
.b13-band { min-height: 48px; padding: 6px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.b13-band.on { background: #ffe27a; color: #2a1a00; }
.b13-items, .b13-goods, .b13-gsets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.b13-item, .b13-good { min-height: 120px; padding: 8px; border-radius: 18px; border: 3px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: inherit; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.b13-item svg { width: 72px; height: 72px; }
.b13-item.on, .b13-item[aria-pressed="true"] { border-color: #ffe27a; box-shadow: 0 0 0 3px rgba(255,226,122,.35); }
.b13-item.b13-band2 { border-style: dashed; } .b13-item.b13-band3 { background: rgba(159,232,255,.10); } .b13-item.b13-band4 { background: rgba(80,60,160,.25); }
.b13-bdsw { display: block; width: 72px; height: 48px; border-radius: 10px; border: 2px solid rgba(255,255,255,.3); }
.b13-gset { padding: 10px; border-radius: 16px; border: 3px solid var(--gc, #ffe27a); background: rgba(255,255,255,.06); text-align: center; }
.b13-gset.done { box-shadow: 0 0 14px var(--gc, #ffe27a); }
.b13-front { pointer-events: none; }
/* cheers */
.b13-cheer-hop svg, svg.b13-cheer-hop { animation: b13hop .5s ease 2; }
.b13-cheer-spin svg, svg.b13-cheer-spin { animation: b13spin 1s ease 1; }
.b13-cheer-wiggle svg, svg.b13-cheer-wiggle { animation: b13wig .25s ease 4; }
@keyframes b13hop { 50% { transform: translateY(-18%); } }
@keyframes b13spin { to { transform: rotate(360deg); } }
@keyframes b13wig { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.b13-wig { animation: b13wig .25s ease 2; }
.b13-pulse { animation: b13pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes b13pulse { 50% { opacity: .15; transform: scale(1.08); } }
.b13-glow { box-shadow: 0 0 0 4px #ffe27a, 0 0 26px #ffe27a !important; animation: b13pulse 1.4s ease-in-out infinite; }
/* card viewer extras */
dialog.pv.b13-bdon::backdrop { background: rgba(10,8,30,.85); }
dialog.pv.b13-bd-twinkles::backdrop { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 60%, #fff6c8, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 20%, #fff, transparent), #0b0f26; }
dialog.pv.b13-bd-pastel::backdrop { background: linear-gradient(135deg, #ffd6ef, #d6e6ff 50%, #e8d6ff); }
dialog.pv.b13-bd-swirl::backdrop { background: conic-gradient(from 30deg at 50% 50%, #2a1b5c, #5a2a7a, #1b3a6c, #2a1b5c); }
dialog.pv.b13-bd-rain::backdrop { background: linear-gradient(90deg, rgba(255,0,0,.18), rgba(255,165,0,.18), rgba(255,255,0,.18), rgba(0,200,0,.18), rgba(0,120,255,.18), rgba(140,0,255,.18)), #140c2e; }
dialog.pv.b13-bd-deep::backdrop { background: radial-gradient(circle at 50% 50%, #1a1446, #02020a 70%); }
.b13-trip { margin: 6px 0; font-size: 16px; text-align: center; opacity: .9; }
/* open world */
.b13-owrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.b13-owrow > svg { width: 140px; height: auto; flex: none; }
.b13-whale { width: 140px; height: auto; }
.b13-owhint { font-size: 18px; opacity: .9; }
.b13-cspots { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.b13-cspot { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font-size: 28px; cursor: pointer; }
.b13-piece { margin: 6px 0; }
.b13-route { font-size: 19px; margin: 8px 0 8px 24px; } .b13-route li { margin: 6px 0; } .b13-route li.got { opacity: .75; }
.b13-shop .b13-good { min-height: 100px; }
/* topsy */
.b13-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.b13-tcard { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.b13-tcard svg { width: 130px; height: auto; transition: transform .6s ease; }
.b13-tcard.flipped svg { transform: rotate(180deg); }
.b13-tcard figcaption { font-size: 18px; }
.b13-ttbar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #2a1b5c; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.4); font-weight: 800; }
html.b13-tt .lg-btn:not(.b13-normal) { animation: b13wig .5s ease 1; }
html.b13-tt .lg-btn:not(.b13-normal):hover { transform: rotate(-3deg); }
/* challenge */
.b13-dial { position: fixed; right: 14px; bottom: 86px; z-index: 40; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #ffe27a; background: #2a1b5c; color: #ffe27a; cursor: pointer; display: grid; place-items: center; padding: 0; }
.b13-dial svg { width: 40px; height: 40px; } .b13-diall { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.b13-dialhand { transform-origin: 20px 20px; transition: transform .3s; }
.b13-dial[data-lv="1"] .b13-dialhand { transform: rotate(60deg); } .b13-dial[data-lv="2"] .b13-dialhand { transform: rotate(120deg); } .b13-dial[data-lv="3"] .b13-dialhand { transform: rotate(180deg); }
.b13-ch { margin: 10px 0; } .b13-ch input[type=range] { width: min(360px, 100%); height: 44px; accent-color: #ffe27a; }
.b13-chl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.b13-chs { min-height: 52px; padding: 8px 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.b13-chs.on { background: #ffe27a; color: #2a1a00; }
/* care + lens */
.b13-jarbar { display: flex; gap: 6px; margin: 8px 0; } .b13-jarbar span { flex: 1; max-width: 60px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,226,122,.4); }
.b13-jarbar span.on { background: linear-gradient(90deg, #ffe27a, #ffb3e6); }
.b13-calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 420px; margin: 8px 0; }
.b13-cd { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; }
.b13-cd.h, .b13-cd.e { background: none; font-weight: 800; } .b13-cd.on { background: rgba(255,226,122,.22); } .b13-cd.today { outline: 2px solid #ffe27a; } .b13-cd b { font-size: 18px; line-height: 1; }
.b13-mname { min-width: 160px; text-align: center; font-size: 18px; }
.b13-panel { margin: 8px 0; padding: 12px; border-radius: 18px; border: 4px solid #fff; background: #fffdf0; color: #2a1a00; max-width: 420px; }
.b13-pscene { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; } .b13-pscene svg { width: 110px; height: auto; }
.b13-panel figcaption { font-size: 18px; text-align: center; } .b13-panel small { display: block; opacity: .7; }
.b13-comf { position: absolute; left: 58%; bottom: 18%; font-size: 30px; z-index: 3; }
.bd-bedscene { position: relative; }
.b13-rings { width: 160px; height: auto; flex: none; } .b13-win { width: 200px; height: auto; flex: none; border-radius: 10px; }
.b13-rd { animation: b13rain 1s linear infinite; } @keyframes b13rain { to { transform: translateY(14px); } }
.b13-sf { animation: b13snow 3s linear infinite; } @keyframes b13snow { to { transform: translateY(12px); } }
.b13-wd { animation: b13wind 2.5s ease-in-out infinite; } @keyframes b13wind { 50% { transform: translateX(10px); } }
.b13-pad { display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; margin: 8px 0; }
.b13-padb { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); cursor: pointer; }
.b13-padb.lit { background: var(--c); box-shadow: 0 0 24px var(--c); }
.b13-garland { display: flex; flex-wrap: wrap; gap: 2px; font-size: 22px; margin: 6px 0; padding: 6px; border-top: 2px dashed rgba(255,226,122,.5); }
.b13-worn[data-b13-wear] { box-shadow: 0 0 0 2px rgba(255,226,122,.35) inset; }
.b13-worn[data-b13-wear="2"] { box-shadow: 0 0 0 3px rgba(255,226,122,.5) inset, 0 0 10px rgba(255,226,122,.25); }
.b13-worn[data-b13-wear="3"] { box-shadow: 0 0 0 3px rgba(255,226,122,.65) inset, 0 0 16px rgba(255,226,122,.4); }
#ln-root.b13-tinted { background-image: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--b13-tint) 30%, transparent), transparent 70%); border-radius: 20px; }
.b13-dd { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle, rgba(60,40,120,.92), rgba(8,6,24,.96)); color: #fff; cursor: pointer; animation: b13fade .8s ease; }
.b13-ddin { max-width: 520px; padding: 24px; text-align: center; } .b13-ddin .lg-lead { font-size: 24px; }
@keyframes b13fade { from { opacity: 0; } }
/* everglow */
.b13-ever { width: 100%; max-width: 640px; height: auto; display: block; margin: 8px auto; }
.b13-raise { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.b13-raise li { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 2px; font-size: 17px; opacity: .7; }
.b13-raise li.ok { opacity: 1; background: rgba(255,226,122,.18); border: 2px solid #ffe27a; }
.b13-raise li span { font-size: 26px; }
/* sleek */
html.lx-pg .b13-chip, html.lx-pg .b13-band, html.lx-pg .b13-chs { border-radius: 8px; min-height: 44px; font-size: 15px; background: #15171c; border-color: #2c2f36; }
html.lx-pg .b13-chip.on, html.lx-pg .b13-chip[aria-pressed="true"], html.lx-pg .b13-band.on, html.lx-pg .b13-chs.on { background: #7cc4ff; color: #0b1020; border-color: #7cc4ff; }
html.lx-pg .b13-item, html.lx-pg .b13-good, html.lx-pg .b13-gset, html.lx-pg .b13-raise li, html.lx-pg .b13-cd { border-radius: 8px; background: #15171c; border-color: #2c2f36; }
html.lx-pg .b13-item.on, html.lx-pg .b13-raise li.ok { border-color: #7cc4ff; background: #182433; box-shadow: none; }
html.lx-pg .b13-wprev { border-radius: 10px; background: #111318; }
html.lx-pg .b13-panel { border-radius: 8px; border-color: #2c2f36; background: #15171c; color: inherit; }
html.lx-pg .b13-stamp, html.lx-pg .b13-new { background: #7cc4ff; color: #0b1020; border-radius: 6px; }
html.lx-pg .b13-dial { background: #15171c; border-color: #7cc4ff; color: #7cc4ff; }
html.lx-pg .b13-ttbar { background: #15171c; border-radius: 10px; }
html.lx-pg .b13-jarbar span { border-radius: 4px; border-color: #2c2f36; } html.lx-pg .b13-jarbar span.on { background: #7cc4ff; }
html.lx-pg .b13-cd.on { background: #182433; } html.lx-pg .b13-cd.today { outline-color: #7cc4ff; }
html.lx-pg .b13-big { font-size: 44px; color: #7cc4ff; }
html.lx-pg .b13-dd { background: rgba(8,10,16,.96); }
/* calm + reduced motion */
html.lx-calm .b13-pulse, html.lx-calm .b13-glow, html.lx-calm .b13-rd, html.lx-calm .b13-sf, html.lx-calm .b13-wd, html.lx-calm .b13-wig, html.lx-calm.b13-tt .lg-btn { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .b13-pulse, .b13-glow, .b13-rd, .b13-sf, .b13-wd, .b13-wig, .b13-dd, html.b13-tt .lg-btn, [class*="b13-cheer-"] svg, svg[class*="b13-cheer-"] { animation: none !important; }
  .b13-tcard svg { transition: none; }
}
.b13-cal .b3-row { flex-wrap: nowrap; align-items: center; justify-content: flex-start; }
.b13-cal .b3-row .lg-btn { flex: none; width: auto; min-width: 60px; }