/* Spell Sketch only. Everything else comes from ../shared/game.css. */
#screen{touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}   /* drawing a spell never scrolls */
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.spells{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:520px;width:100%;margin:0 auto}
.spell{position:relative;font-family:inherit;background:var(--panel);border:2px solid var(--line);border-radius:12px;
  height:50px;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;
  transition:transform .08s ease,border-color .08s ease,background .08s ease}
.spell svg{width:26px;height:26px}
.spell small{position:absolute;top:4px;left:7px;font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
.spell:hover{border-color:var(--c)}
.spell:active,.spell.on{border-color:var(--c);background:#241c38;transform:scale(.95)}
.spell:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media (max-width:420px){.spells{gap:6px}.spell{height:46px}}
@media (prefers-reduced-motion:reduce){.spell{transition:none}.spell:active,.spell.on{transform:none}}