.spell-pic { font-size: clamp(4rem, 16vw, 7rem); line-height: 1; margin: .25rem 0 1.25rem; }

.spell-slots { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.spell-slot {
    width: clamp(48px, 12vw, 64px); height: clamp(56px, 14vw, 72px);
    border-radius: 14px; background: #f3f0ff; border: 3px dashed #c9b6ff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--kf); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); color: #6a4bbc;
}
.spell-slot.done { background: #e9fbef; border-style: solid; border-color: #69db7c; color: #2f9e44; }
.spell-slot.hintflash { color: #9775fa; opacity: .5; }

.spell-tiles { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.spell-tile {
    width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px);
    border-radius: 14px; border: none; cursor: pointer;
    font-family: var(--kf); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.2rem); color: #fff;
    background: linear-gradient(160deg, #74c0fc, #4dabf7);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
}
.spell-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.spell-tile.used { opacity: .4; pointer-events: none; }
.spell-tile.wrong { animation: wiggle .4s; }