/* Feeling Faces. Layout only; the faces are drawn by kids-emotionface-core.js. */
.ef-stage{display:grid;gap:14px}
.ef-levels{margin-top:4px}

.ef-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:112px;padding:12px;border-radius:18px;background:rgba(255,255,255,.06);touch-action:none}
.ef-face{position:relative;width:88px;height:88px;padding:6px;border:3px solid rgba(255,255,255,.35);border-radius:50%;background:#fff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .18s ease,box-shadow .18s ease}
.ef-face[hidden]{display:none}
.ef-face:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.ef-face.ef-selected{border-color:#ffd54f;box-shadow:0 0 0 4px rgba(255,213,79,.45)}
.ef-face.ef-drag{cursor:grabbing;z-index:5;transition:none;box-shadow:0 14px 26px rgba(0,0,0,.4)}
.ef-face.ef-shake{animation:ef-shake .45s ease}
.ef-art{display:block;width:100%;height:100%}

.ef-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:680px;width:100%;margin:0 auto}
.ef-cards.ef-kinds-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.ef-card{display:grid;justify-items:center;gap:4px;padding:10px 8px 8px;min-height:176px;border:3px solid rgba(255,255,255,.4);border-radius:20px;background:rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.ef-card:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.ef-card.ef-over{transform:scale(1.04);background:rgba(255,255,255,.2);box-shadow:0 0 0 4px #ffd54f}
.ef-happy{border-color:#ffe082}
.ef-sad{border-color:#90caf9}
.ef-angry{border-color:#ef9a9a}
.ef-surprised{border-color:#ce93d8}
.ef-scared{border-color:#ffab91}
.ef-calm{border-color:#a5d6a7}
.ef-card-art{display:block;width:76px;height:76px}
.ef-card-svg{display:block;width:100%;height:100%}
.ef-card-name{font-weight:800;font-size:1.05rem}
.ef-card-items{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:36px;width:100%}
.ef-mini{display:block;width:34px;height:34px}
.ef-mini-art{display:block;width:100%;height:100%}

.ef-actions{justify-content:center}
.ef-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ef-win:focus{outline:none}
.ef-howto{margin-top:28px}
.ef-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes ef-shake{
 0%,100%{transform:translateX(0)}
 20%{transform:translateX(-7px)}
 40%{transform:translateX(7px)}
 60%{transform:translateX(-5px)}
 80%{transform:translateX(4px)}
}

@media (max-width:520px){
 .ef-cards{gap:6px}
 .ef-card{min-height:0;padding:6px 4px;gap:2px}
 .ef-card-art{width:56px;height:56px}
 .ef-card-name{font-size:.9rem}
 .ef-card-items{min-height:26px}
 .ef-mini{width:24px;height:24px}
}

@media (max-width:420px){
 .ef-face{width:72px;height:72px}
}

@media (prefers-reduced-motion:reduce){
 .ef-face,.ef-card{transition:none}
 .ef-face.ef-shake{animation:none}
}