/* סיפוריק+ – עיצוב לשכבות החדשות */
.sp-decor, .sp-av { position: relative; overflow: visible !important; }
.sp-av { width: 64px; height: 64px; flex-shrink: 0; }
.sp-av-base { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.14); }
.sp-av-base svg, .sp-av-base img { width: 100%; height: 100%; display: block; }
.sp-av-lg { width: 110px; height: 110px; }
.sp-av-xl { width: 150px; height: 150px; }
.sp-gear { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-decor .sp-gear { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.sp-pet { position: absolute; left: -16%; bottom: -10%; font-size: 2.6em; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); animation: sp-pet 3s ease-in-out infinite; pointer-events: none; }
.dash-avatar .sp-pet, .sp-av:not(.sp-av-lg):not(.sp-av-xl) .sp-pet { font-size: 1.5rem; }
.sp-av-xl .sp-pet { font-size: 3.4rem; }
@keyframes sp-pet { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) rotate(-4deg) } }

/* הודעות וקונפטי */
#spToasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.sp-toast { background: #fff; color: #1e293b; border: 2px solid #fde68a; padding: 10px 18px; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 20px rgba(15,23,42,.15); animation: sp-in .35s ease-out; transition: opacity .5s, transform .5s; max-width: 90vw; text-align: center; }
.sp-toast.out { opacity: 0; transform: translateY(10px); }
@keyframes sp-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.sp-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3900; pointer-events: none; }

/* קיצורי דרך ובר כפתורים */
.sp-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; }
.sp-quick button { border: 2px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.sp-quick button:hover, .sp-quick button:focus-visible { background: #eef2ff; outline: 3px solid #fde68a; outline-offset: 2px; }
.sp-quick .sp-q-night { background: linear-gradient(135deg,#1e1b4b,#4338ca); color: #fff; border-color: #312e81; }
.sp-live-bar, .sp-story-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 16px; }
.sp-big-btn { border: 0; border-radius: 18px; padding: 14px 16px; font: inherit; font-size: 1.05rem; font-weight: 800; color: #fff; background: linear-gradient(135deg,#16a34a,#0d9488); cursor: pointer; box-shadow: 0 6px 14px rgba(13,148,136,.25); line-height: 1.3; }
.sp-big-btn small { display: block; font-weight: 600; opacity: .9; font-size: .82rem; }
.sp-big-btn.sp-night { background: linear-gradient(135deg,#1e1b4b,#4f46e5); box-shadow: 0 6px 14px rgba(67,56,202,.3); }
.sp-big-btn.sp-print { background: linear-gradient(135deg,#f59e0b,#ea580c); box-shadow: 0 6px 14px rgba(234,88,12,.25); }
.sp-big-btn:hover, .sp-big-btn:focus-visible { filter: brightness(1.07); outline: 3px solid #fde68a; outline-offset: 2px; }
.sp-mini-btn { display: inline-flex; align-items: center; gap: 4px; border: 2px solid #c7d2fe; background: #fff; color: #3730a3; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.sp-mini-btn.ok { background: #16a34a; border-color: #15803d; color: #fff; }
.sp-mini-btn:hover, .sp-mini-btn:focus-visible { filter: brightness(1.05); outline: 3px solid #fde68a; outline-offset: 2px; }
.sp-tabs { margin-bottom: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* חנות */
.sp-shop-hero { display: flex; gap: 22px; align-items: center; background: linear-gradient(135deg,#fef3c7,#fce7f3); border-radius: 24px; padding: 22px 22px 22px 40px; margin-bottom: 10px; flex-wrap: wrap; }
.sp-shop-hero h3 { margin: 0 0 4px; color: #9d174d; }
.sp-shop-hero p { margin: 0 0 6px; color: #475569; }
.sp-balance { font-size: 1.25rem; color: #b45309 !important; }
.sp-shop-group { margin: 16px 0 8px; color: #334155; }
.sp-shop-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sp-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 3px solid #e2e8f0; border-radius: 18px; padding: 12px 8px; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.sp-item:hover, .sp-item:focus-visible { transform: translateY(-2px); border-color: #a78bfa; outline: none; }
.sp-item.owned { border-color: #86efac; background: #f0fdf4; }
.sp-item.on { border-color: #16a34a; box-shadow: 0 0 0 3px #bbf7d0; }
.sp-item.cant { opacity: .7; }
.sp-item-prev { width: 76px; height: 76px; display: grid; place-items: center; }
.sp-item-prev svg { width: 100%; height: 100%; overflow: visible; }
.sp-item-pet { font-size: 3rem; }
.sp-item-name { font-weight: 800; color: #1e293b; }
.sp-item-price { font-size: .9rem; color: #b45309; font-weight: 700; }
.sp-item.owned .sp-item-price { color: #15803d; }
.sp-item { position: relative; }
.sp-item-special { border-color: #bfdbfe; }
.sp-item-rare { border-color: #ddd6fe; background: linear-gradient(180deg,#fff,#faf5ff); }
.sp-item-legend { border-color: #fcd34d; background: linear-gradient(180deg,#fffbeb,#fff); box-shadow: 0 4px 14px rgba(245,158,11,.18); }
.sp-tier { position: absolute; top: 6px; inset-inline-start: 6px; font-size: .7rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.sp-tier-special .sp-tier, .sp-tier.sp-tier-special { background: #dbeafe; color: #1d4ed8; }
.sp-tier.sp-tier-rare { background: #ede9fe; color: #6d28d9; }
.sp-tier.sp-tier-legend { background: linear-gradient(135deg,#fde68a,#f9a8d4); color: #7c2d12; }
.sp-wallet { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sp-coin { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid #fcd34d; color: #92400e; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 1.05rem; }
.sp-coin b { font-size: 1.25rem; }
.sp-coin.sp-tag { border-color: #c4b5fd; color: #5b21b6; }
.sp-coin.sp-star { border-color: #e2e8f0; color: #b45309; }
.sp-howto { background: #fff; border: 2px dashed #fcd34d; border-radius: 18px; padding: 12px 16px; margin: 0 0 10px; color: #334155; }
.sp-howto p { margin: 0 0 8px; }
.sp-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sp-tiers li { border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: #f8fafc; border: 2px solid #e2e8f0; text-align: center; }
.sp-tiers li span { font-weight: 700; color: #475569; }
.sp-tiers .sp-tier-special { border-color: #bfdbfe; background: #eff6ff; }
.sp-tiers .sp-tier-rare { border-color: #ddd6fe; background: #f5f3ff; }
.sp-tiers .sp-tier-legend { border-color: #fcd34d; background: linear-gradient(135deg,#fffbeb,#fdf2f8); }
.sp-shop-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 4px; }
.sp-shop-nav .sp-chip { cursor: pointer; font: inherit; }
.sp-shop-group { scroll-margin-top: 90px; }
.sp-shop-group small { background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 1px 9px; font-size: .8rem; }
.sp-hand { position: absolute; right: -14%; bottom: -8%; font-size: 2.2em; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); transform: rotate(-12deg); pointer-events: none; }
.dash-avatar .sp-hand, .sp-av:not(.sp-av-lg):not(.sp-av-xl) .sp-hand { font-size: 1.3rem; }
.sp-av-xl .sp-hand { font-size: 3rem; }
.sp-wallet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg,#fef3c7,#ede9fe); border-radius: 18px; padding: 10px 14px; margin: 0 0 12px; }
.sp-wallet-how { color: #475569; font-size: .92rem; font-weight: 600; }

/* אלבום */
.sp-album h3 { color: #7c3aed; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-count { background: #ede9fe; color: #6d28d9; padding: 2px 12px; border-radius: 999px; font-size: .95rem; }
.sp-series { background: #fff; border: 2px solid #e9d5ff; border-radius: 20px; padding: 14px; margin-bottom: 12px; }
.sp-series.full { border-color: #facc15; background: linear-gradient(135deg,#fffbeb,#fdf4ff); }
.sp-series-head { display: flex; justify-content: space-between; font-size: 1.05rem; color: #4c1d95; }
.sp-series-note { margin: 2px 0 10px; color: #64748b; font-size: .9rem; }
.sp-slots { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.sp-slot { aspect-ratio: 1; border: 3px dashed #d8b4fe; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; background: #faf5ff; }
.sp-slot .sp-q { color: #d8b4fe; font-size: 1.3rem; font-weight: 800; }
.sp-slot.got { border-style: solid; border-color: #c084fc; background: #fff; box-shadow: 0 3px 8px rgba(124,58,237,.15); }
.sp-slot.got span { animation: sp-pop .5s ease-out both; }
@keyframes sp-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0 } to { transform: none; opacity: 1 } }

/* דפי מדבקות – בוחרים מדבקה ומדביקים בריבוע */
.sp-pages { background: #fff; border: 2px solid #fbcfe8; border-radius: 22px; padding: 14px; margin: 10px 0 16px; }
.sp-pages h4, .sp-album-sub { color: #be185d; margin: 0 0 4px; font-size: 1.15rem; }
.sp-album-sub { color: #7c3aed; margin-top: 6px; }
.sp-pages-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sp-page-head { display: flex; justify-content: space-between; font-size: 1.05rem; color: #831843; margin-bottom: 6px; }
.sp-page-grid { list-style: none; margin: 0; padding: 12px; border-radius: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.sp-page-cell { width: 100%; aspect-ratio: 1; border: 3px dashed rgba(100,116,139,.55); border-radius: 16px; background: rgba(255,255,255,.55); display: grid; place-items: center; font-size: clamp(1.8rem, 7vw, 3rem); cursor: pointer; padding: 0; font-family: inherit; transition: transform .15s, background .15s; }
.sp-page-grid.dark .sp-page-cell { border-color: rgba(226,232,240,.6); background: rgba(255,255,255,.12); }
.sp-page-cell.got { border-style: solid; border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.8); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.sp-page-grid.dark .sp-page-cell.got { background: rgba(255,255,255,.22); }
.sp-page-cell.ready:hover, .sp-page-cell.ready:focus-visible { transform: scale(1.05); background: rgba(254,249,195,.9); }
.sp-page-cell:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.sp-page-cell.pop span { display: inline-block; animation: sp-pop .45s ease-out both; }
.sp-page-hint { margin: 10px 0 8px; color: #475569; font-weight: 700; text-align: center; min-height: 1.4em; }
.sp-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; background: #fdf2f8; border: 2px solid #fbcfe8; border-radius: 18px; padding: 10px; }
.sp-tray-item { aspect-ratio: 1; border: 3px solid #fff; border-radius: 14px; background: #fff; font-size: 1.9rem; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(190,24,93,.15); transition: transform .15s; }
.sp-tray-item:hover { transform: translateY(-2px); }
.sp-tray-item.on { border-color: #db2777; background: #fef9c3; transform: scale(1.1); box-shadow: 0 0 0 3px #fbcfe8; }
.sp-tray-item:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.sp-tray-erase { background: #f1f5f9; }
.sp-page-actions { display: flex; justify-content: center; margin-top: 10px; }
@media (max-width: 520px) { .sp-page-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; } }
html.a11y-dark .sp-pages, html.a11y-dark .sp-tray { background: #1e293b; border-color: #475569; }
html.a11y-dark .sp-page-hint, html.a11y-dark .sp-page-head { color: #e2e8f0; }
html.a11y-contrast .sp-page-cell, html.a11y-contrast .sp-tray-item { border-color: #000; }

/* מצב שגרה חי */
body.sp-live-open { overflow: hidden; }
.sp-live { position: fixed; inset: 0; z-index: 3000; background: linear-gradient(180deg,#fef9c3,#dcfce7); color: #1e293b; display: flex; flex-direction: column; align-items: center; padding: 14px 16px 22px; overflow-y: auto; text-align: center; }
.sp-live.part-afternoon { background: linear-gradient(180deg,#e0f2fe,#fef3c7); }
.sp-live.part-evening { background: linear-gradient(180deg,#0f172a,#312e81); color: #e0e7ff; }
.sp-live-top { width: 100%; max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.sp-live-part { font-weight: 800; font-size: 1.15rem; }
.sp-live-av .sp-av { width: 54px; height: 54px; }
.sp-live-x { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); font-size: 1.3rem; cursor: pointer; color: #1e293b; }
.sp-live-dots { list-style: none; display: flex; gap: 8px; padding: 0; margin: 12px 0 4px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.sp-live-dots li { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.7); font-size: 1.3rem; border: 3px solid transparent; }
.sp-live-dots li.cur { border-color: #f59e0b; transform: scale(1.12); }
.sp-live-dots li.done { opacity: .6; }
.part-evening .sp-live-dots li { background: rgba(255,255,255,.15); }
.sp-live-title { font-size: clamp(1.6rem, 5vw, 2.6rem); margin: 8px 0 6px; position: relative; z-index: 1; }
.sp-pie { position: relative; width: min(72vw, 52vh, 380px); aspect-ratio: 1; margin: 6px 0; z-index: 1; }
.sp-pie svg { width: 100%; height: 100%; }
.sp-pie-bg { fill: #fff; }
.part-evening .sp-pie-bg { fill: #1e1b4b; }
.sp-pie-fill { fill: #22c55e; transition: fill .6s; }
.sp-pie-fill.low { fill: #f59e0b; }
.part-evening .sp-pie-fill { fill: #818cf8; }
.part-evening .sp-pie-fill.low { fill: #c4b5fd; }
.sp-pie-ring { fill: none; stroke: rgba(15,23,42,.15); stroke-width: 3; }
.sp-pie-center { position: absolute; inset: 27%; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.12); color: #1e293b; }
.sp-live-icon { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; }
.sp-live.running .sp-live-icon { animation: sp-bob 2.4s ease-in-out infinite; }
@keyframes sp-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.sp-live-time { font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; }
.sp-live-win { width: 100%; height: 100%; display: grid; place-items: center; font-size: clamp(6rem, 22vw, 10rem); animation: sp-pop .7s ease-out; }
.sp-live-msg { font-size: 1.25rem; font-weight: 700; min-height: 2.6em; max-width: 640px; margin: 8px 0; position: relative; z-index: 1; }
.sp-live-ctrl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.sp-live-ctrl button { border: 0; border-radius: 999px; padding: 14px 24px; font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; background: #fff; color: #1e293b; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.sp-live-ctrl button.ok { background: #16a34a; color: #fff; font-size: 1.3rem; padding: 16px 34px; }
.sp-live-ctrl button:focus-visible, .sp-live-x:focus-visible { outline: 4px solid #fde68a; outline-offset: 3px; }
.sp-night-sky { position: absolute; inset: 0; pointer-events: none; }
.sp-night-sky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fef9c3; animation: sp-twinkle 3s ease-in-out infinite; }
@keyframes sp-twinkle { 0%,100% { opacity: .2 } 50% { opacity: 1 } }

/* גלגל רגשות */
.sp-feel, .sp-kind { background: #fff; border: 2px solid #fbcfe8; border-radius: 24px; padding: 16px; margin-bottom: 16px; text-align: center; }
.sp-feel h3, .sp-kind h3 { margin: 0 0 4px; color: #be185d; }
.sp-wheel { --size: min(86vw, 360px); position: relative; width: var(--size); height: var(--size); margin: 10px auto; border-radius: 50%; background: var(--wheel); box-shadow: 0 8px 24px rgba(190,24,93,.15), inset 0 0 0 6px #fff; }
.sp-emo { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border: 0; background: transparent; cursor: pointer; transform: rotate(var(--a)) translateY(calc(var(--size) * -0.33)) rotate(calc(-1 * var(--a))); padding: 0; font: inherit; }
.sp-emo-in { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,.75); transition: transform .2s, box-shadow .2s; }
.sp-emo-ico { font-size: calc(var(--size) * .1); line-height: 1.1; }
.sp-emo-lbl { font-weight: 800; color: #1e293b; font-size: calc(var(--size) * .042); }
.sp-emo:hover .sp-emo-in, .sp-emo:focus-visible .sp-emo-in { transform: scale(1.1); }
.sp-emo:focus-visible { outline: none; }
.sp-emo:focus-visible .sp-emo-in { box-shadow: 0 0 0 4px #be185d; }
.sp-emo.on .sp-emo-in { background: #fff; transform: scale(1.15); box-shadow: 0 0 0 4px #be185d, 0 6px 14px rgba(0,0,0,.15); }
.sp-wheel-hub { position: absolute; inset: 39%; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: calc(var(--size) * .07); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.sp-feel-panel { margin-top: 12px; background: color-mix(in srgb, var(--ec, #fce7f3) 30%, #fff); border: 2px solid var(--ec, #fbcfe8); border-radius: 20px; padding: 14px; }
.sp-feel-panel h4 { margin: 0 0 8px; font-size: 1.2rem; color: #1e293b; }
.sp-ex-switch { display: inline-flex; gap: 6px; margin-bottom: 8px; }
.sp-ex-switch button { border: 2px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.sp-ex-switch button.active { border-color: #2563eb; background: #dbeafe; }
.sp-ex-cue { font-size: 1.2rem; font-weight: 800; color: #1e3a8a; margin: 8px 0 2px; min-height: 1.5em; }
.sp-ex-count { color: #64748b; margin: 0; }
.sp-ex-soothe { font-size: 1.15rem; line-height: 1.6; color: #334155; max-width: 520px; margin: 8px auto; }
.sp-ex-btns, .sp-ex-done { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sp-ex-win { font-size: 1.15rem; font-weight: 800; color: #15803d; margin: 4px 0; }
.sp-breath-stage { height: 210px; display: grid; place-items: center; }
.sp-bubble { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #bae6fd 30%, #60a5fa 75%, #3b82f6); box-shadow: 0 0 30px rgba(96,165,250,.5); transform: scale(.8); transition: transform 4s ease-in-out; }
.sp-bubble.in { transform: scale(2.3); transition-duration: 4s; }
.sp-bubble.out { transform: scale(.8); transition-duration: 6s; }
.sp-candle { display: flex; flex-direction: column; align-items: center; }
.sp-flame { width: 34px; height: 56px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff7ed 0 15%, #fde047 35%, #f97316 75%); box-shadow: 0 0 30px 8px rgba(251,191,36,.45); transform-origin: 50% 100%; transition: transform 4s ease-in-out; animation: sp-flicker 1.2s ease-in-out infinite alternate; }
.sp-flame.in { transform: scale(1.25); }
.sp-flame.out { transform: scale(.85) skewX(-16deg); transition-duration: 6s; }
@keyframes sp-flicker { from { filter: brightness(1) } to { filter: brightness(1.15) } }
.sp-wax { width: 46px; height: 110px; margin-top: 4px; border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg,#fecdd3,#fff1f2,#fecdd3); position: relative; }
.sp-wax::before { content: ''; position: absolute; top: -8px; left: 50%; width: 3px; height: 10px; background: #334155; transform: translateX(-50%); }
.sp-rest-stage { position: relative; height: 140px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg,#312e81,#6366f1); }
.sp-moon { position: absolute; top: 18px; right: 24%; font-size: 3.4rem; animation: sp-bob 6s ease-in-out infinite; }
.sp-cloud { position: absolute; font-size: 2.6rem; animation: sp-drift 18s linear infinite; }
.sp-cloud.c1 { top: 60px; } .sp-cloud.c2 { top: 24px; animation-duration: 26s; animation-delay: -9s; }
@keyframes sp-drift { from { right: -20% } to { right: 110% } }
.sp-jump-stage { height: 190px; display: flex; align-items: flex-end; justify-content: center; gap: 30px; padding-bottom: 10px; }
.sp-jumper { font-size: 4.4rem; }
.sp-jumper.on { animation: sp-jump .6s ease-in-out infinite; }
@keyframes sp-jump { 0%,100% { transform: translateY(0) scaleY(.94) } 50% { transform: translateY(-70px) scaleY(1.04) } }
.sp-jump-time { width: 96px; height: 96px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; margin-bottom: 40px; font-variant-numeric: tabular-nums; }
.sp-squeeze-stage { height: 180px; display: grid; place-items: center; }
.sp-ball { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, #fdba74 35%, #ea580c); transition: transform 2.6s ease-in-out, border-radius 2.6s; }
.sp-ball.sq { transform: scale(.6, .45); border-radius: 40%; }
.sp-happy-stage { display: flex; justify-content: center; gap: 14px; font-size: 2.4rem; height: 80px; align-items: center; }
.sp-happy-stage span { animation: sp-bob 1.6s ease-in-out infinite; }

/* מילה טובה – כרטיס מתהפך */
.sp-kind { border-color: #fecdd3; }
.sp-flip { perspective: 1000px; max-width: 420px; margin: 10px auto; }
.sp-flip-in { position: relative; display: block; width: 100%; min-height: 190px; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.3,1); font: inherit; }
.sp-flip.flipped .sp-flip-in { transform: rotateY(180deg); cursor: default; }
.sp-flip-front, .sp-flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; font-size: 1.15rem; font-weight: 700; box-shadow: 0 8px 20px rgba(225,29,72,.18); }
.sp-flip-front { background: linear-gradient(135deg,#fb7185,#e11d48); color: #fff; }
.sp-flip-front small { font-weight: 600; opacity: .9; font-size: .85rem; }
.sp-flip-back { background: #fff1f2; color: #881337; border: 3px solid #fda4af; transform: rotateY(180deg); line-height: 1.5; }
.sp-flip-big { font-size: 2.8rem; line-height: 1; }
.sp-flip-in:focus-visible { outline: 4px solid #fde68a; outline-offset: 4px; border-radius: 22px; }
.sp-kind-act { min-height: 44px; }

/* אזור הורים */
.sp-parents { background: #f8fafc; border: 2px solid #cbd5e1; border-radius: 20px; margin: 0 0 14px; }
.sp-parents > summary { cursor: pointer; padding: 16px 18px; font-weight: 900; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, #4f46e5, #7c3aed); border-radius: 18px; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.sp-parents[open] > summary { border-radius: 18px 18px 0 0; margin-bottom: 12px; }
html.a11y-dark .sp-parents > summary { background: #4338ca; color: #fff; }
.sp-parents > summary:focus-visible { outline: 3px solid #2563eb; border-radius: 18px; }
#spParentsBody { padding: 0 14px 14px; }
.sp-gate { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-gate p { width: 100%; margin: 0; }
.sp-gate input, .sp-form input[type=number], .sp-form input:not([type]) { font: inherit; padding: 6px 10px; border: 2px solid #cbd5e1; border-radius: 10px; width: 5.5em; }
.sp-form input:not([type]) { width: 100%; max-width: 280px; }
.sp-gate-msg { color: #b91c1c; font-weight: 700; }
.sp-pz { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px; margin-top: 12px; }
.sp-pz h4 { margin: 0 0 10px; color: #1e3a8a; }
.sp-pz h5 { margin: 14px 0 6px; color: #334155; }
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sp-tile { background: #f1f5f9; border-radius: 14px; padding: 10px; text-align: center; }
.sp-tile b { display: block; font-size: 1.6rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.sp-tile span { color: #475569; font-size: .88rem; }
.sp-scroll { overflow-x: auto; }
.sp-week { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 420px; text-align: center; }
.sp-week th { font-size: .85rem; color: #475569; font-weight: 700; white-space: nowrap; }
.sp-week thead small { display: block; font-weight: 400; color: #94a3b8; }
.sp-week td { background: #f1f5f9; border-radius: 8px; padding: 6px 2px; font-size: .85rem; color: #94a3b8; }
.sp-week td.some { background: #fef3c7; color: #92400e; font-weight: 700; }
.sp-week td.full { background: #dcfce7; }
.sp-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sp-bars li { display: grid; grid-template-columns: 7.5em 1fr 2em; align-items: center; gap: 8px; font-size: .92rem; }
.sp-bar { height: 14px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.sp-recent { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.sp-recent li { display: grid; grid-template-columns: 8.5em 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e2e8f0; }
.sp-recent li span:first-child { color: #64748b; direction: ltr; text-align: end; }
.sp-recent b { color: #15803d; } .sp-recent b.neg { color: #b45309; }
.sp-muted { color: #64748b; font-size: .92rem; margin: 6px 0; }
.sp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-form h4 { width: 100%; }
.sp-form label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: #334155; }
.sp-form label.wide { width: 100%; flex-wrap: wrap; }
.sp-form fieldset { width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px; margin: 0; }
.sp-form legend { font-weight: 800; color: #1e3a8a; padding: 0 6px; }
.sp-dur { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e2e8f0; }
.sp-dur strong { width: 100%; color: #475569; }
.sp-check input { width: 20px; height: 20px; }
.sp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.sp-pgear { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 14px 10px 6px 26px; }
.sp-pgear p { margin: 0 0 6px; }
.sp-chip { border: 2px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sp-chip.on { border-color: #16a34a; background: #dcfce7; }

/* נגישות: תנועה מופחתת / מצב רגוע / ניגודיות / כהה */
@media (prefers-reduced-motion: reduce) {
  .sp-pet, .sp-live-icon, .sp-night-sky i, .sp-cloud, .sp-moon, .sp-happy-stage span, .sp-flame, .sp-slot.got span, .sp-page-cell.pop span { animation: none !important; }
  .sp-jumper.on { animation-duration: 1.2s; }
  .sp-flip-in { transition: none; }
}
html.a11y-motion .sp-pet, html.a11y-motion .sp-cloud, html.a11y-motion .sp-happy-stage span { animation: none !important; }
html.a11y-dark .sp-feel, html.a11y-dark .sp-kind, html.a11y-dark .sp-series, html.a11y-dark .sp-item, html.a11y-dark .sp-pz, html.a11y-dark .sp-parents { background: #1e293b; border-color: #475569; color: #e2e8f0; }
html.a11y-dark .sp-item-name, html.a11y-dark .sp-emo-lbl, html.a11y-dark .sp-feel-panel h4, html.a11y-dark .sp-tile b { color: #f1f5f9; }
html.a11y-dark .sp-tile, html.a11y-dark .sp-week td, html.a11y-dark .sp-slot { background: #0f172a; }
html.a11y-dark .sp-feel-panel { background: #0f172a; }
html.a11y-dark .sp-ex-cue { color: #bfdbfe; } html.a11y-dark .sp-ex-soothe, html.a11y-dark .sp-pz h5, html.a11y-dark .sp-form label { color: #cbd5e1; }
html.a11y-contrast .sp-item, html.a11y-contrast .sp-series, html.a11y-contrast .sp-slot, html.a11y-contrast .sp-mini-btn, html.a11y-contrast .sp-quick button { border-color: #000; }
@media (max-width: 520px) {
  .sp-shop-hero { padding: 18px 16px 16px 30px; }
  .sp-live-ctrl button { padding: 12px 18px; }
  .sp-bars li { grid-template-columns: 6.5em 1fr 1.6em; }
  .sp-recent li { grid-template-columns: 1fr auto; } .sp-recent li span:first-child { grid-column: 1 / -1; text-align: start; }
}
@media print { #spToasts, .sp-confetti, .sp-live { display: none !important; } }