/* Mirror Face. Layout only; colours come from the cell classes, never from inline styles. Columns come from ay-cols-N. */
.ay-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ay-levels{margin-top:4px}
.ay-level-name{display:block;font-size:.8em;opacity:.8}

.ay-status{margin:0}

/* The board is a square. The dashed mirror line runs down the gap in the middle, where the two halves meet. */
.ay-board{position:relative;display:grid;gap:6px;box-sizing:border-box;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto;padding:10px;border-radius:18px;background:rgba(255,255,255,.06)}
.ay-board::after{content:"";position:absolute;top:10px;bottom:10px;left:50%;border-left:3px dashed rgba(255,255,255,.7);transform:translateX(-1.5px);pointer-events:none}
.ay-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.ay-cols-8{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}

.ay-cell{display:block;min-width:0;min-height:0;border-radius:8px;box-sizing:border-box}
.ay-left{background:rgba(255,255,255,.08)}
.ay-left.ay-on{background:#4dd0e1}
.ay-right{margin:0;padding:0;border:0;background:rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease}
.ay-right:focus-visible{outline:4px solid #ffd54f;outline-offset:2px}
.ay-right.ay-on{background:#4dd0e1}
.ay-right.ay-ghost{background:transparent;outline:3px dashed rgba(255,255,255,.6);outline-offset:-3px}
.ay-right.ay-bad{background:#ff8a65}
.ay-right.ay-shake{animation:ay-shake .4s ease}

.ay-actions{justify-content:center}
.ay-actions svg{width:24px;height:24px;flex:0 0 auto}
.ay-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ay-win:focus{outline:none}
.ay-howto{margin-top:28px}
.ay-steps{display:grid;gap:8px;padding-left:1.2em}

@keyframes ay-shake{
 0%,100%{transform:translateX(0)}
 25%{transform:translateX(-5px)}
 50%{transform:translateX(5px)}
 75%{transform:translateX(-3px)}
}

@media (max-width:520px){
 .ay-board{gap:4px;padding:8px}
 .ay-board::after{top:8px;bottom:8px}
}

@media (prefers-reduced-motion:reduce){
 .ay-right,.ay-right.ay-shake{transition:none;animation:none}
}