/* Spot the Difference. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-differences{--df-pink:var(--k-pink,#ff9fd3);--df-ring:#ff4fa3;--df-frame:#0a1031}
.df-stage{position:relative}
.df-print-head{display:none}

/* ---------- Toolbar ---------- */
.df-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.df-scene-no{margin:0!important;font:800 .78rem/1.2 "Manrope",Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--df-pink)!important}
.df-lv-n{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin-left:4px;border-radius:999px;background:rgba(255,159,211,.18);color:var(--df-pink);font-size:.8em}
.kg-levels button[aria-pressed="true"] .df-lv-n{background:var(--df-pink);color:#3a0f28}

.df-howto{display:flex;align-items:center;gap:12px;margin:0 0 16px!important;padding:10px 16px;border-radius:16px;background:rgba(255,159,211,.1);border:1px solid rgba(255,159,211,.3);font-weight:700;color:var(--k-ink,#f4f6ff)!important}
.df-howto-icon{flex:none;width:48px;height:32px}
.df-howto-icon svg{width:100%;height:100%;fill:none;stroke:var(--df-pink);stroke-width:2.4}
.df-howto-icon circle{stroke:var(--k-gold,#f6c96c);stroke-width:2.8}

/* ---------- Pictures ---------- */
.df-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.df-pic{margin:0;min-width:0}
.df-frame{position:relative;border-radius:22px;padding:8px;background:var(--df-frame);border:2px solid #34428f;box-shadow:0 14px 34px rgba(2,4,20,.45)}
.df-pad{outline:none}
.df-pad:focus-visible{box-shadow:0 0 0 4px var(--k-gold,#f6c96c),0 0 0 7px #fff,0 0 24px rgba(246,201,108,.6)}
.df-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:15px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.df-pic figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font:800 .95rem/1.2 "Manrope",Inter,sans-serif;color:var(--k-ink-2,#d5dbf5)}
.df-cap-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--k-surface-3,#1e2a66);color:var(--k-ink,#f4f6ff);font-size:.85rem}
.df-pic-b .df-cap-no{background:var(--df-pink);color:#3a0f28}

/* Marks drawn inside the SVG */
.df-ring-back{fill:none;stroke:#fff;stroke-width:9}
.df-ring{fill:rgba(255,79,163,.12);stroke:var(--df-ring);stroke-width:4.5}
.df-badge circle{fill:var(--df-ring);stroke:#fff;stroke-width:2.5}
.df-badge text{fill:#fff;font:800 13px/1 "Manrope",Inter,sans-serif}
.df-found-mark{transform-box:fill-box;transform-origin:center;animation:df-pop .45s cubic-bezier(.2,.9,.3,1.3)}
.df-hint-ring{fill:rgba(246,201,108,.18);stroke:var(--k-gold,#f6c96c);stroke-width:5;stroke-dasharray:10 7;transform-box:fill-box;transform-origin:center;animation:df-pulse 1s ease-in-out infinite}
.df-miss{fill:rgba(255,255,255,.55);stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:df-fade .7s ease-out forwards}
.df-cross{display:none;pointer-events:none}
.df-pad:focus-visible .df-cross,.df-keyboard:focus .df-cross{display:inline}
.df-cross-ring,.df-cross-lines{fill:none;stroke:#1d1440;stroke-width:4;stroke-linecap:round}
.df-cross{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff)}

@keyframes df-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes df-pulse{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes df-fade{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes df-wiggle{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.df-wiggle{animation:df-wiggle .42s ease}

/* ---------- Bar, status, found list ---------- */
.df-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.df-dots{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.df-dots li{width:22px;height:22px;border-radius:50%;border:3px solid var(--k-line,#2a3678);background:var(--k-bg-2,#0c1234);transition:background .2s,border-color .2s,transform .2s}
.df-dots li.df-dot-on{background:var(--df-pink);border-color:#fff;transform:scale(1.08)}
.df-tools{display:flex;flex-wrap:wrap;gap:8px}
.df-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;min-width:56px;padding:8px 18px;border-radius:999px;border:2px solid var(--k-line,#2a3678);background:rgba(255,255,255,.04);color:var(--k-ink,#f4f6ff);font:800 1rem/1.1 "Manrope",Inter,sans-serif;cursor:pointer;transition:background .14s,border-color .14s;touch-action:manipulation}
.df-tool svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.df-tool:not(:disabled):hover{background:var(--k-surface-2,#172154);border-color:#3b4a9a}
.df-tool:disabled{opacity:.4;cursor:default}
#df-hint svg{color:var(--k-gold,#f6c96c)}
#df-hint{border-color:#6b5a33}
.df-tool:focus-visible,.df-stage .kp-button:focus-visible,.df-stage .kg-levels button:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.df-status{margin:14px 0 0!important;padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.2em;position:relative;font-size:1.02rem!important;line-height:1.4}
.df-status:before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--df-pink) 20%);box-shadow:0 0 12px rgba(255,159,211,.6)}
.df-keys{margin:10px 0 0!important}
.df-found{margin-top:18px;padding:16px 18px;border-radius:20px;background:rgba(7,11,33,.4);border:1px solid var(--k-line-soft,#1f2a62)}
.df-found h3{margin:0 0 8px!important;font-size:1.05rem!important}
.df-list{margin:0;padding:0;list-style:none;counter-reset:df;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.df-list li{counter-increment:df;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--k-surface-2,#172154);color:var(--k-ink,#f4f6ff)!important;font-weight:700;overflow-wrap:anywhere;animation:df-pop .35s ease}
.df-list li:before{content:counter(df);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--df-ring);color:#fff;font:800 .82rem/1 "Manrope",Inter,sans-serif;box-shadow:0 0 0 2px #fff}
.df-empty{margin:0!important}
.df-empty[hidden]{display:none}

/* ---------- Win ---------- */
.df-win{position:relative;overflow:hidden;outline:none}
.df-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.df-win h3,.df-win p{position:relative}
.df-win p{max-width:520px}
.df-win-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.df-win-actions .kp-button{flex:0 1 210px}
.df-win-actions .kp-button[hidden]{display:none}
.df-star{width:56px;height:56px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.df-star-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes df-star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.df-win:not([hidden]) .df-star{animation:df-star .5s cubic-bezier(.2,.9,.3,1.3) both}
.df-win:not([hidden]) .df-star:nth-child(2){animation-delay:.15s}
.df-win:not([hidden]) .df-star:nth-child(3){animation-delay:.3s}
.df-confetti{position:absolute;inset:0;pointer-events:none}
.df-bit{position:absolute;top:-14px;width:10px;height:14px;border-radius:3px;opacity:0}
.df-bit:nth-child(5n+1){background:#ff7eb6}.df-bit:nth-child(5n+2){background:#3dd5f3}.df-bit:nth-child(5n+3){background:#f6c96c}.df-bit:nth-child(5n+4){background:#62e3ab}.df-bit:nth-child(5n){background:#a594ff;border-radius:50%}
.df-bit-0{left:4%}.df-bit-1{left:11%}.df-bit-2{left:19%}.df-bit-3{left:26%}.df-bit-4{left:33%}.df-bit-5{left:41%}.df-bit-6{left:48%}.df-bit-7{left:55%}.df-bit-8{left:62%}.df-bit-9{left:70%}.df-bit-10{left:77%}.df-bit-11{left:84%}.df-bit-12{left:91%}.df-bit-13{left:96%}
@keyframes df-fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(260px) rotate(540deg);opacity:0}}
.df-win:not([hidden]) .df-bit{animation:df-fall 1.9s ease-in both}
.df-win:not([hidden]) .df-bit:nth-child(3n+1){animation-delay:.2s;animation-duration:2.2s}
.df-win:not([hidden]) .df-bit:nth-child(3n+2){animation-delay:.45s;animation-duration:1.7s}

/* ---------- Small screens ---------- */
@media(max-width:760px){
 .df-pics{grid-template-columns:1fr}
 .df-frame{padding:6px;border-radius:18px}
 .df-svg{border-radius:13px}
 .df-bar{flex-direction:column;align-items:stretch}
 .df-dots{justify-content:center}
 .df-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .df-tool{flex-direction:column;gap:4px;padding:8px 4px;border-radius:16px;font-size:clamp(12px,.86rem,16px);text-align:center;overflow-wrap:anywhere}
 .df-list{grid-template-columns:1fr}
}
@media(max-width:420px){
 .df-howto{padding:8px 12px;font-size:.92rem}
 .df-howto-icon{width:38px;height:26px}
 .df-win-actions .kp-button{flex:1 1 100%}
}

@media(max-width:340px){.df-tools{grid-template-columns:1fr}.df-tool{flex-direction:row}}

@media(prefers-reduced-motion:reduce){
 .df-found-mark,.df-hint-ring,.df-miss,.df-wiggle,.df-list li,.df-win:not([hidden]) .df-star,.df-win:not([hidden]) .df-bit{animation:none!important}
 .df-win .df-bit{display:none}
 .df-dots li{transition:none}
}

/* ---------- Print: both pictures for pen and paper ---------- */
@media print{
 @page{size:A4 portrait;margin:12mm}
 .kp-header,.kp-footer,.kg-hero,.kg-toolbar,.df-howto,.df-bar,.df-status,.df-keys,.df-found,.df-win,.kg-grownups,.kp-back{display:none!important}
 .df-print-head{display:block;margin:0 auto 6mm;max-width:150mm;color:#000;text-align:center}
 .df-print-head p{margin:0 0 2mm!important;color:#000!important}
 .df-print-title{font:800 20pt/1.2 "Manrope",Inter,sans-serif}
 .df-ticks{display:flex;justify-content:center;gap:3mm}
 .df-tick{display:inline-block;width:6mm;height:6mm;border:1.5pt solid #000;border-radius:50%}
 .df-pics{display:block}
 .df-pic{break-inside:avoid;margin:0 auto 6mm;max-width:150mm}
 .df-frame{background:#fff;border:1.5pt solid #000;box-shadow:none;padding:2mm;border-radius:4mm}
 .df-svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .df-marks,.df-cross{display:none!important}
 .df-pic figcaption{color:#000;margin-top:2mm}
 .df-cap-no{background:#fff!important;color:#000!important;border:1.5pt solid #000}
}

/* Long title words ("Difference") must wrap on tiny screens with large text. */
#kids-differences .kg-hero h1{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:800px){#kids-differences .kg-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){#kids-differences .kg-hero h1{font-size:clamp(1.7rem,9vw,2.1rem)!important}}