/* Lantern Flip: paper lanterns on a night-blue board; lit ones glow warm. */
.lf-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: min(100%, 440px); margin: 6px auto 0; padding: 14px; border-radius: 24px; background: linear-gradient(165deg, #22305A, #121A33); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--glass-shadow); }
.lf-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 16px; background: rgba(255,255,255,.05); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lf-lamp { width: 62%; height: 74%; border-radius: 45% 45% 40% 40% / 50% 50% 45% 45%; background: linear-gradient(180deg, #3A4466, #262E4A); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); position: relative; transition: background .2s, box-shadow .2s; }
.lf-lamp::before, .lf-lamp::after { content: ''; position: absolute; left: 25%; right: 25%; height: 9%; border-radius: 3px; background: #1A2038; }
.lf-lamp::before { top: -6%; } .lf-lamp::after { bottom: -6%; }
.lf-cell.on .lf-lamp { background: radial-gradient(circle at 50% 45%, #FFF6C9, #FFC24A 45%, #E0661F 100%); box-shadow: 0 0 18px 4px rgba(255, 170, 60, .65), inset 0 -4px 0 rgba(150, 50, 0, .25); }
.lf-cell.flip .lf-lamp { animation: lf-flip .25s ease-out; }
.lf-cell.hint { box-shadow: 0 0 0 3px #7FD8FF; animation: lf-ring 1s ease-in-out 3; }
.lf-cell.solved .lf-lamp { background: linear-gradient(180deg, #4C6A9A, #2C3E66); }
@keyframes lf-flip { 50% { transform: scale(.82) rotate(-4deg); } }
@keyframes lf-ring { 50% { box-shadow: 0 0 0 6px rgba(127, 216, 255, .4); } }
@media (prefers-reduced-motion: reduce) { .lf-cell.flip .lf-lamp, .lf-cell.hint { animation: none; } .lf-lamp { transition: none; } }