/* Shadow Match / Gölge Eşleştir. Builds on the Kids design system v3 tokens in kids-product.css. */
.sm{--sm-accent:var(--k-sky);--sm-paper:#fff6e4;--sm-wall:#dfeaff;--sm-wall-2:#c9dafc;--sm-ink:#1b2148;--sm-ok:var(--k-mint);position:relative}
.sm *{box-sizing:border-box}
.sm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Toolbar + levels */
.sm .kg-levels{max-width:100%}
.sm .kg-levels button{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sm-level-n{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--k-surface-3);color:var(--k-ink);font-size:.82em;flex:none}
.sm .kg-levels button[aria-pressed="true"] .sm-level-n{background:var(--sm-accent);color:#08183a}
.sm button:focus-visible,.sm-win h3:focus-visible{outline:4px solid var(--k-gold);outline-offset:3px}

/* Progress */
.sm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.sm-dots{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.sm-dots li{width:16px;height:16px;border-radius:50%;background:var(--k-bg-2);border:2px solid var(--k-line);position:relative;transition:background .2s,border-color .2s,transform .2s}
.sm-dots li.is-current{border-color:var(--sm-accent);box-shadow:0 0 0 3px rgba(124,188,255,.25);transform:scale(1.15)}
.sm-dots li.is-star{background:var(--k-gold);border-color:var(--k-gold)}
.sm-dots li.is-done{background:var(--sm-accent);border-color:var(--sm-accent)}
.sm .kg-score{margin:0}
.sm .kg-score i{font-style:normal}
.sm-star{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;color:rgba(246,201,108,.25)}
.sm-score-star,.sm-star.is-on{color:var(--k-gold)}

/* How to play */
.sm-how{display:flex;align-items:center;gap:14px;margin:14px 0 16px;padding:10px 16px 10px 10px;border-radius:20px;background:var(--k-bg-2);border:1px solid var(--k-line-soft);color:var(--k-ink)!important;font-weight:700;font-size:clamp(1rem,2.2vw,1.12rem);line-height:1.35}
.sm-how-icons{display:flex;align-items:center;gap:4px;flex:none}
.sm-how-pic,.sm-how-sil{display:grid;place-items:center;width:52px;height:52px;border-radius:14px}
.sm-how-pic{background:var(--sm-paper)}
.sm-how-sil{background:var(--sm-wall);color:var(--sm-ink)}
.sm-how-pic svg,.sm-how-sil svg{width:46px;height:46px}
.sm-how-arrow{width:26px;height:14px;color:var(--sm-accent)}
.sm-how[data-level="5"] .sm-how-icons{flex-direction:row-reverse}
.sm-how[data-level="5"] .sm-how-arrow{transform:scaleX(-1)}

/* Shared card faces */
.sm-pic,.sm-sil{display:block;width:100%;height:auto;aspect-ratio:1/1}
.sm-sil{color:var(--sm-ink)}
.sm-layers{position:relative;display:block;width:100%}
.sm-layers .sm-reveal{position:absolute;inset:0;opacity:0;transform:scale(.92);transition:opacity .35s ease,transform .35s ease}
.sm-n{position:absolute;top:8px;left:10px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 .85rem/1 "Manrope",Inter,sans-serif;background:var(--k-surface);color:var(--k-ink)}

/* Levels 1, 2, 3 and 5: big card, arrow, choices */
.sm-pick{display:grid;grid-template-columns:minmax(0,300px) auto minmax(0,1fr);gap:clamp(12px,2.4vw,26px);align-items:center}
.sm-card{margin:0;position:relative;border-radius:30px;padding:clamp(10px,2vw,18px);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;box-shadow:0 10px 0 rgba(0,0,0,.2),0 0 0 4px rgba(255,255,255,.06)}
.sm-hero-card{background:var(--sm-paper)}
.sm-shadow-card{background:radial-gradient(circle at 50% 35%,#f4f8ff,var(--sm-wall) 60%,var(--sm-wall-2))}
.sm-shadow-card.is-revealed .sm-reveal{opacity:1;transform:none}
.sm-shadow-card.is-revealed .sm-sil{opacity:0;transition:opacity .35s ease}
.sm-name{font-family:"Manrope",Inter,sans-serif;font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.1;color:var(--sm-ink);text-align:center;overflow-wrap:anywhere;padding:0 4px 4px}
.sm-arrow{color:var(--sm-accent);display:grid;place-items:center}
.sm-arrow svg{width:46px;height:24px}
.sm-choices{display:grid;gap:clamp(10px,1.8vw,16px);min-width:0}
.sm-choices.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-choices.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm-choice{position:relative;min-width:0;min-height:56px;padding:clamp(8px,1.4vw,14px);border-radius:24px;border:4px solid transparent;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.3);transition:transform .12s ease,box-shadow .12s,border-color .15s,opacity .2s;-webkit-tap-highlight-color:transparent}
.sm-shadow{background:radial-gradient(circle at 50% 35%,#f4f8ff,var(--sm-wall) 60%,var(--sm-wall-2))}
.sm-picture{background:var(--sm-paper)}
.sm-choice:not(:disabled):hover{border-color:var(--sm-accent);transform:translateY(-3px);box-shadow:0 10px 0 rgba(0,0,0,.3)}
.sm-choice:not(:disabled):active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.sm-choice.is-right{border-color:var(--sm-ok);box-shadow:0 0 0 6px rgba(98,227,171,.35),0 7px 0 rgba(0,0,0,.3);opacity:1}
.sm-choice.is-right .sm-reveal{opacity:1;transform:none}
.sm-choice.is-right .sm-sil{opacity:.18;transition:opacity .35s ease}
.sm-choice.is-wrong{opacity:.5;cursor:default;border-color:var(--k-coral);border-style:dashed;box-shadow:none}
.sm-choice.is-faded:not(.is-right){opacity:.55;cursor:default}
.sm-choice:disabled{cursor:default}
.sm-hint{animation:sm-glow 1.4s ease-in-out infinite;border-color:var(--k-gold)!important}

/* Level 4: three pictures, three shadows */
.sm-pair{display:flex;flex-direction:column;gap:10px}
.sm-row-label{margin:0!important;font:800 .82rem/1 "Manrope",Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--k-muted)!important}
.sm-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px);max-width:760px;width:100%}
.sm-tile,.sm-slot{position:relative;min-width:0;min-height:56px;padding:clamp(8px,1.4vw,14px);border-radius:24px;border:4px solid transparent;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.3);transition:transform .12s ease,box-shadow .12s,border-color .15s,opacity .2s;-webkit-tap-highlight-color:transparent}
.sm-tile{background:var(--sm-paper);touch-action:none}
.sm-tile svg{display:block;width:100%;height:auto;aspect-ratio:1/1;pointer-events:none}
.sm-tile[aria-pressed="true"]{border-color:var(--k-gold);transform:translateY(-6px);box-shadow:0 0 0 6px rgba(246,201,108,.3),0 12px 0 rgba(0,0,0,.3)}
.sm-tile:not(:disabled):hover{border-color:var(--sm-accent)}
.sm-tile.is-dragging{opacity:.35}
.sm-tile.is-used{opacity:.28;cursor:default;box-shadow:none;transform:none}
.sm-slot{background:radial-gradient(circle at 50% 35%,#f4f8ff,var(--sm-wall) 60%,var(--sm-wall-2));display:flex;flex-direction:column;align-items:center;gap:2px}
.sm-slot:not(:disabled):hover,.sm-slot.is-over{border-color:var(--sm-accent);transform:translateY(-3px)}
.sm-slot.is-over{border-style:dashed;box-shadow:0 0 0 6px rgba(124,188,255,.3),0 7px 0 rgba(0,0,0,.3)}
.sm-slot.is-done{border-color:var(--sm-ok);box-shadow:0 0 0 6px rgba(98,227,171,.3),0 7px 0 rgba(0,0,0,.3);cursor:default}
.sm-slot.is-done .sm-reveal{opacity:1;transform:none}
.sm-slot.is-done .sm-sil{opacity:.18;transition:opacity .35s ease}
.sm-slot.is-miss{border-color:var(--k-coral);border-style:dashed}
.sm-slot-name{font:800 clamp(.9rem,2vw,1.15rem)/1.1 "Manrope",Inter,sans-serif;color:var(--sm-ink);text-align:center;overflow-wrap:anywhere}
.sm-ghost{position:fixed;left:0;top:0;z-index:60;width:clamp(84px,16vw,130px);height:clamp(84px,16vw,130px);margin:calc(clamp(84px,16vw,130px) / -2) 0 0 calc(clamp(84px,16vw,130px) / -2);padding:8px;border-radius:24px;background:var(--sm-paper);border:4px solid var(--k-gold);box-shadow:0 18px 40px rgba(0,0,0,.45);pointer-events:none;transform:rotate(-4deg)}
.sm-ghost svg{display:block;width:100%;height:100%}

/* Keep card faces when a button is disabled (the global button:disabled rule would paint them dark) */
.sm button.sm-shadow,.sm button.sm-slot{background:radial-gradient(circle at 50% 35%,#f4f8ff,var(--sm-wall) 60%,var(--sm-wall-2));color:var(--sm-ink)}
.sm button.sm-picture,.sm button.sm-tile{background:var(--sm-paper);color:var(--sm-ink)}
.sm button.sm-choice:disabled:not(.is-right):not(.is-wrong):not(.sm-hint),.sm button.sm-tile:disabled,.sm button.sm-slot:disabled:not(.is-done){border-color:transparent}

/* Actions, status, win */
.sm-actions .kp-button{cursor:pointer}
.sm-next{min-width:200px}
.sm-keys{margin:14px 0 0;font-size:.85rem}
.sm.is-won .kg-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sm.is-won .sm-keys{display:none}
.sm-win h3{outline:0;border-radius:10px}
.sm-win .kg-stars{gap:10px;font-size:3rem}
.sm-win .sm-star{width:1em;height:1em}
.sm-win .sm-star.is-on{filter:drop-shadow(0 0 10px rgba(246,201,108,.55))}
.sm-win-actions{justify-content:center}
.sm-win:not([hidden]){animation:sm-pop .45s ease-out both}

/* Print sheet: only shown when printing */
.sm-sheet{display:none}

/* Feedback motion (skipped with reduced motion) */
.is-cheer{animation:sm-cheer .6s ease-out}
.is-shake{animation:sm-shake .42s ease-in-out}
.is-nudge{animation:sm-shake .42s ease-in-out}
@keyframes sm-cheer{0%{transform:scale(1)}35%{transform:scale(1.05) rotate(-1.5deg)}70%{transform:scale(.98) rotate(1deg)}100%{transform:none}}
@keyframes sm-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes sm-glow{0%,100%{box-shadow:0 0 0 0 rgba(246,201,108,.7),0 7px 0 rgba(0,0,0,.3)}50%{box-shadow:0 0 0 10px rgba(246,201,108,0),0 7px 0 rgba(0,0,0,.3)}}
@keyframes sm-pop{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}

/* Responsive */
@media(max-width:980px){
 .sm-pick{grid-template-columns:minmax(0,240px) auto minmax(0,1fr)}
 .sm-choices.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .sm-pick{grid-template-columns:minmax(0,1fr);justify-items:center}
 .sm-card{width:100%;max-width:230px}
 .sm-arrow svg{transform:rotate(90deg);width:36px;height:20px}
 .sm-choices{width:100%;max-width:520px}
 .sm-choices.is-4{max-width:380px}
}
@media(max-width:560px){
 .sm .kg-toolbar{flex-direction:column;align-items:stretch}
 .sm .kg-levels{border-radius:22px;flex-direction:column}
 .sm .kg-levels button{justify-content:flex-start;border-radius:16px}
 .sm-how{align-items:flex-start;flex-direction:column;gap:8px;padding:12px}
 .sm-card{max-width:190px;border-radius:24px}
 .sm-choice,.sm-tile,.sm-slot{border-radius:18px;border-width:3px;padding:6px}
 .sm-n{width:22px;height:22px;top:5px;left:6px;font-size:.72rem}
 .sm-row{gap:8px}
}
@media(max-width:380px){
 .sm-choices{gap:8px}
 .sm-n{display:none}
}
@media(prefers-reduced-motion:reduce){
 .sm *,.sm *:before,.sm *:after,.sm-ghost{animation:none!important;transition:none!important}
 .sm-choice:hover,.sm-choice:active,.sm-slot:hover,.sm-slot.is-over,.sm-tile[aria-pressed="true"],.sm-dots li.is-current{transform:none!important}
 .sm-hint{box-shadow:0 0 0 6px rgba(246,201,108,.6),0 7px 0 rgba(0,0,0,.3)}
}

/* Print: one A4 cut-and-match sheet, black and white friendly */
@media print{
 @page{size:A4;margin:12mm}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-grownups,.sm>*:not(.sm-sheet){display:none!important}
 html,body{background:#fff!important}
 .kg-stage.sm{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .sm-sheet{display:block;color:#000;max-width:none}
 .sm-sheet p{max-width:none!important}
 .sm-sheet-title{font:800 22pt/1.2 "Manrope",Inter,sans-serif;text-align:center;margin:0 0 2mm!important;color:#000!important}
 .sm-sheet-text{text-align:center;font-size:12pt;margin:0 0 5mm!important;color:#000!important}
 .sm-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10mm}
 .sm-sheet-col{display:grid;grid-template-rows:auto;gap:3mm}
 .sm-sheet-head{font:800 12pt/1 "Manrope",Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;text-align:center;margin:0 0 1mm!important;color:#000!important}
 .sm-sheet-cell{height:36mm;display:flex;align-items:center;justify-content:center;gap:3mm;break-inside:avoid}
 .sm-sheet-cell svg{width:34mm;height:34mm}
 .sm-sheet-cut{border:1.5px dashed #000;border-radius:3mm}
 .sm-sheet-cut span{font:700 11pt/1.2 "Manrope",Inter,sans-serif;color:#000;max-width:24mm}
 .sm-sheet-shadow{border:1.5px solid #000;border-radius:3mm}
 .sm-sheet-shadow .sm-sil{color:#000}
 .sm-sheet-foot{text-align:center;font-size:9pt;margin:4mm 0 0!important;color:#000!important}
}