/* Life Cycle. Layout only; colours come from the drawn pictures and the slot classes, never from inline styles. */
.ly-stage{display:grid;gap:14px}
.ly-cycle{margin:0;font-weight:800;text-align:center;font-size:1.05em}
.ly-levels{margin-top:4px}
.ly-level-name{display:block;font-size:.8em;opacity:.8}

.ly-status{margin:0}

.ly-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:680px;width:100%;margin:0 auto}
.ly-slot{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:6px;min-height:150px;padding:10px 6px;border:0;border-radius:20px;background:rgba(255,255,255,.06);color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,background-color .18s ease}
.ly-slot:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.ly-slot.ly-over{transform:scale(1.04);background:rgba(255,213,79,.22)}
.ly-slot.ly-filled{cursor:default;background:transparent}
.ly-slot-no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffd54f;color:#1e2a4a;font-size:1.4em;font-weight:800}
.ly-slot-no.ly-slot-hidden{background:transparent;border:3px dashed rgba(255,255,255,.45);color:rgba(255,255,255,.7)}
.ly-inlay{display:grid;place-items:center;align-content:start;width:100%;min-height:60px;border-radius:14px;pointer-events:none}
.ly-inlay:not(:empty){background:#fff;color:#1e2a4a;padding:8px 6px;box-shadow:0 6px 14px rgba(0,0,0,.25);gap:4px}
.ly-inlay .ly-card-name{font-size:.95em;font-weight:700;text-align:center;line-height:1.2}
.ly-inlay .ly-card-icon{width:48px;height:48px}
.ly-fact{font-size:.8em;line-height:1.3;text-align:center}

.ly-loop{margin:0;text-align:center;opacity:.85;font-size:.95em}

.ly-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;min-height:124px;padding:12px;border-radius:18px;background:rgba(255,255,255,.06);touch-action:none}
.ly-card{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;width:150px;min-height:112px;padding:10px;border:3px solid rgba(255,255,255,.35);border-radius:18px;background:#fff;color:#1e2a4a;font:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.ly-card[hidden]{display:none}
.ly-card:focus-visible{outline:4px solid #ffd54f;outline-offset:3px}
.ly-card.ly-selected{border-color:#ffd54f;box-shadow:0 0 0 4px rgba(255,213,79,.45)}
.ly-card.ly-drag{cursor:grabbing;z-index:5;transition:none;box-shadow:0 14px 26px rgba(0,0,0,.4)}
.ly-card.ly-shake{animation:ly-shake .45s ease}
.ly-card-icon{display:block;width:56px;height:56px}
.ly-card-name{font-weight:700;font-size:.95em;text-align:center;line-height:1.2}

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

@keyframes ly-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:560px){
 .ly-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .ly-slot{min-height:132px}
 .ly-slot-no{width:38px;height:38px;font-size:1.2em}
}

@media (max-width:420px){
 .ly-card{width:112px;min-height:104px;padding:8px}
 .ly-card-icon{width:44px;height:44px}
 .ly-card-name{font-size:.82em}
 .ly-inlay .ly-card-icon{width:40px;height:40px}
}

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